我一整天都在尝试为我的网站创建一个“容器”。
我需要并排放置 3 个 div。中心 div 具有固定宽度，800px，并且位于屏幕中央，其他 div 必须占据左右两侧的所有剩余空间。
左边的 div 将位于顶部的某个位置，右边的 div 将位于底部的某个位置，我将使用它们来放置背景图像，并在 x 上重复。
我尝试过显示：表格，表格单元格，但这不会有帮助，因为当我将任何信息放入右侧 div 时（除 之外的任何内容），所有设计都会移至左侧。
我已经实现了下面的代码，但此设置的问题是，当我调整窗口大小时，右侧 div 将移至中心 div 上方（我希望右侧和左侧 div 自行调整大小，但不要跨过中心分区）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class = 'left'>1</div>
<div class = 'center'>2</div>
<div class = 'right'>3</div>
</body>
</html>
CSS:
.left{
border: 2px solid green;
float:left;
width:auto;
}
.center{
border: 2px solid red;
position:absolute;
width:800px;
min-width:800px;
left:50%;
margin-left: -400px;
}
.right{
border: 2px solid grey;
float:right;
position:absolute;
right:0;
}
在jsfiddle中：http://jsfiddle.net/Ec22y/ http://jsfiddle.net/Ec22y/我怎样才能做到这一点？谢谢
可以通过 div 实现，如下所示：
<div class="container">
<div class="left-wrap">
<div class="left-wrap-inner">
<div class="left-div"></div>
</div>
</div>
<div class="right-wrap">
<div class="right-wrap-inner">
<div class="right-div"></div>
</div>
</div>
<div class="central-div"></div>
</div>
和CSS
.container{display:block; position:relative;}
.left-wrap{display:block; float:left; width:50%;}
.left-wrap .left-wrap-inner{display:block; padding:0 400px 0 0;}
.left-wrap .left-wrap-inner .left-div{display:block; height:50px; background:#f00;}
.right-wrap{display:block; float:right; width:50%;}
.right-wrap .right-wrap-inner{display:block; padding:0 0 0 400px;}
.right-wrap .right-wrap-inner .right-div{display:block; height:50px; background:#0f0;}
.central-div{display:block; width:800px; height:50px; position:absolute; top:0; left:50%; marging:0 0 0 -400px;}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
