Ada*_*itt 11 html css layout liquid-layout
我想为我的营销网站制作一个3列布局,顶部横幅中有图像.
我希望液体左/右侧有一个固定的中心.理想情况下,html看起来像这样:
<div id="pixelLeft"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </div>
<style>
#pixelLeft { background: url(../../images/pixel_left_fixed.png) 0 0 repeat-x; }
#pixelRight { background: url(../../images/pixel_right_fixed.png) 0 0 repeat-x; }
#bannerCenter { /* something here to make fixed width of 1550px */ }
</style>
左/右像素侧的图像是1px×460px.图像mybanner.png是1550px x 460px.
提前致谢!(特别是如果它适用于所有浏览器!)
Raj*_*shi 16
这有用吗？
<div class="wrap">
<div id="pixelLeft"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </div>
</div>
<div style="clear:both;"></div>
*{
margin:0;
padding:0;
}
#bannerCenter{
background:#ddd;
width: 500px;
float:left;
}
#pixelLeft{
background:#999;
width: calc(50% - 250px);
float:left;
}
#pixelRight{
background:#999;
width: calc(50% - 250px);
float:right;
}
#bannerCenter,#pixelLeft,#pixelRight{
height: 400px;
}
您可以使用jQuery而不是使用calc(50% - 250px);它来使其与旧版浏览器兼容.
$(document).ready(function() {
$(window).on('resize', function() {
$('#pixelLeft, #pixelRight').css('width',($('body').width()-$('#bannerCenter').width())/2);
}).trigger('resize');
});
为同样的问题添加了flexbox解决方案.
*{
margin:0;
padding:0;
}
.wrap {
display: flex;
}
#pixelLeft, #pixelRight{
display: flex;
flex:1;
}
#bannerCenter{
background:#ddd;
min-width: 500px;
display: flex;
flex: 1;
}
#pixelLeft{
background:#999;
}
#pixelRight{
background:#999;
}
#bannerCenter,#pixelLeft,#pixelRight{
height: 400px;
}<div class="wrap">
<div id="pixelLeft"> </div>
<div id="bannerCenter">
<img src="images/mybanner.png" />
</div>
<div id="pixelRight"> </div>
</div>这是一个很好的解决方案,在我看来是最简单的解决方案.它看起来很干净,不需要包装div.
HTML
<body>
<div id="left_container">
<div id="left">
left content
</div>
</div>
<div id="center">
center content
</div>
<div id="right_container">
<div id="right">
right content
</div>
</div>
</body>
CSS
#left_container {
width:50%;
float:left;
margin-right:-480px; /* minus half of the center container width */
/* not important */
height: 200px;
}
#left {
margin-right:480px; /* half of the center container width */
/* not important */
background: #888;
height: 600px;
}
#center {
width:960px; /* size of the fixed width */
float:left;
/* not important */
color: #FFF;
background: #333;
height: 500px;
}
#right_container {
width:50%;
float:right;
margin-left:-480px; /* minus half of the center container width */
/* not important */
height: 300px;
}
#right {
margin-left:480px; /* half of the center container width */
/* not important */
height: 300px;
background-color: #888;
}
请享用!