HTML & CSS：固定宽度 div 内的全宽（全分辨率）div

Question

http://i.stack.imgur.com/FZyiq.jpg 我已经设计了这个布局，并且在我看来它工作得很好，但是当我尝试用 CSS 来做这个时，事情变得有点奇怪。

我有一个宽度为 960 像素的 div，这个 div 是主要的内容包装器。我希望这个画廊 div 忽略宽度并拥有 100% 的浏览器分辨率（或其他宽度）。知道怎么做吗？

<div id="conteudo" > 
    <div class="exploded-wrapper" id="your_post_here_<?php the_ID(); ?>">
        <div class="exploded" id="your_post_here_<?php the_ID(); ?>">
            <a href="javascript:jQuery('.exploded-wrapper').hide();jQuery('.exploded').hide();" class="close"></a>
            <div class="detalhes">
                <div class="desc_wrapper">
                    <div class="desc">
                        <h2>
                            <?php the_title(); ?>
                        </h2>
                        <?php echo the_excerpt(); ?>
                        <div class="desc_pag">
                   <!--a href="#">1</a>
                            <a href="#">2</a>
                            <a href="#">3</a-->
                        </div>
                    </div>
                </div>                    
                <div class="galeria">
                    <?php the_content('Read the rest of this entry &raquo;'); ?>
            <script type="text/javascript">
    jQuery(document).ready(function() {

        // Using default configuration
        //$("#galeria").carouFredSel();

        // Using custom configuration
        jQuery("#galeria").carouFredSel({
            //items             : 2,
            circular            : true,
            direction           : "left",
            infinite            : true,
            scroll : {
                items           : 1,
                easing          : "swing",                          
                pauseOnHover    : true,
                mousewheel      : true
            }                   
        }); 
    });

    </script>
                </div>
            </div>
        </div>
    </div>
    </div>

对于 CSS，请使用 firebug 并检查 http://ccrdesign.com/portifolio/

Answer 1

一、你可以使用javascript/jquery手动将展开后的div的宽度设置为页面宽度，但是这样很hackish，不推荐。

我建议您重新考虑您的 html 结构。与其使用一个宽度为 960 像素的内容包装器，不如让您的包装器为 100% 宽度，交替排列照片和“空”的 100% div，您可以轻松扩展它们。所以，抽象：

<div class="wrapper" style="width:100%;">
    <div class="row1" style="width:960px;left:50%;margin-left:-480px;height:100px;">
        <div class="gallery photo1">
            <!-- row of photo content -->
        </div>
    </div>
    <div class="row2" ... ...">
    </div>
    ..etc..
</div>

你的 javascript 可以在点击的 div 下附加一个 div 并将样式设置为你想要的任何样式，并且由于父 div 将是 100% 宽度，你可以达到你想要的效果。这些将很好地堆叠:)。