[英]HTML & CSS: Fullwidth (full resolution) div inside a fixed width div
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結構。 而不是使用一個960px寬度的內容包裝器,而是將包裝器的寬度設置為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%,因此您可以實現所需的效果。 這些將很好地堆疊:)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.