3 divs并排 - 中心一个固定宽度和其他占据屏幕空间的其余部分 [英] 3 divs side by side - the center one fixed width and other ones take the rest of the screen space
问题描述
我一整天都在尝试为我的网站创建一个容器。
我需要并排放置的3个div。中心div有一个固定的宽度，800px，并位于屏幕的中心，其他必须占用所有剩余的空间在右侧和左侧。
左div将在顶部，右边一个在底部，我将使用它们放在那里一个背景图像，重复在x。
我尝试了display：table，table-cell，但这不会有帮助，因为当我把任何信息放在右边的div设计向左移动。
我已经实现了下面的代码，但是这个设置的问题是，当我调整窗口大小，右div将移动中心一（我希望右边和左边的div调整自己，但不要跨过中心div）
< ！doctype html>/ pre>
< html>
< head>
< meta charset =utf-8>
< title> test< / title>
< link href =css / style.css =stylesheettype =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 gray;
float：right;
position：absolute;
right：0;
}
在jsfiddle中： 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;左：50％; marging：0 0 0 -400px;}
I've been trying all day long to create a "container" for my website. I need 3 divs positioned side by side. The center div has a fixed width, 800px and be positioned in the center of the screen, the other ones must take all the remaining space on right and left side. The left div will be somewhere at the top and the right one at the bottom and I will use them to put there a background-image, repeated on x.
I have tried display:table, table-cell, but this will not help because when i put any information in the right div (anything else than , all the design move to the left.
I have implemented the code below but the problem with this set-up is that when i resize the window, the right div will move over the center one (i want that the right and the left div resize themselves, but not to step over the center 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; }in jsfiddle: http://jsfiddle.net/Ec22y/ How can i do this? Thanks
解决方案Its possible by div as follows:
<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;}
这篇关于3 divs并排 - 中心一个固定宽度和其他占据屏幕空间的其余部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
