http://i.stack.imgur.com/FZyiq.jpg 我已经设计了这个布局并且它在我的脑海中工作得很好,但是当我尝试用 CSS 来实现它时,事情变得有点奇怪。
我有一个宽度为 960px 的 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 »'); ?>
<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/
最佳答案
一,你可以使用javascript/jquery手动设置展开后的div的宽度为页面宽度,但是这很黑,我不推荐它。
我建议您重新考虑您的 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% 宽度,您可以实现您想要的效果。这些将很好地堆叠 : )。
关于HTML & CSS : Fullwidth (full resolution) div inside a fixed width div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9060261/