Question

我一直在努力为我的网站创建一个“容器”。我需要并排放置3个div。中心div有一个固定的宽度，800px，位于屏幕的中央，其他的必须占用左右两侧的所有剩余空间。左边div将位于顶部，右边位于底部，我将使用它们将背景图像放在x上。

我尝试过显示：table，table-cell，但这没有用，因为当我把任何信息放在正确的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/ 我怎样才能做到这一点？感谢

Answer 1

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;}

Answer 2

尝试添加另一个包含所有div的div：

<div class = "wrap">
   <div class = 'left'>1</div>
   <div class = 'center'>2</div>
   <div class = 'right'>3</div>
</div>

然后给它全宽：

.wrap{
   width: 100%;
}

然后将左侧和中间div都向左浮动，可能会删除所有绝对位置，看看这是否有效。

Answer 3

我建议使用表格，这些日子的工作量较少，也是推荐的布局方式。

一个例子：

<table border="1" width=100%>
  <tr>
    <th>Side</th>
    <th width=600px >Center</th>
    <th>Side</th>
  </tr>
</table>

Answer 4

完整的HTML：

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
            #three {
                margin-top: 30px;
                display: table;
            }

            #three > div {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                display: table-cell;
            }

            #three > .left {
                background: cyan;
            }

            #three > .right {
                background: purple;
            }

            #three > .center {
                width: 600px;
                background: blue;
            }

            p:first-child {
                margin-top: 0;
            }
        </style>
    </head>
    <body>
        <div id="three">
            <div class="left">
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat consequat nulla, sed dignissim diam molestie non. Ut est erat, ullamcorper sed mauris et, fermentum lacinia mi. Ut sollicitudin venenatis purus nec facilisis. Pellentesque non elit nibh. Aenean pellentesque lorem elit, nec condimentum purus posuere nec. Vivamus tincidunt dolor a velit gravida ultricies. Donec scelerisque ultrices dignissim. Praesent malesuada est velit, a egestas elit bibendum at. Morbi ornare ipsum non auctor hendrerit. Mauris varius quam id leo egestas rhoncus. Quisque magna augue, eleifend at velit vel, aliquam varius urna. Vivamus non aliquam nisl. Aliquam erat volutpat. Curabitur et pulvinar magna. Mauris aliquet aliquet sapien at commodo.</p>

                    <p>Cras sed tincidunt ligula. Suspendisse in ipsum et nulla eleifend sodales. Donec justo mauris, fermentum dignissim lectus vitae, dignissim interdum est. Aenean commodo tincidunt lacinia. Suspendisse luctus adipiscing auctor. Quisque porttitor feugiat leo, eu feugiat elit mollis sit amet. Vivamus eget dignissim nisl. Aliquam vitae lorem ac quam porttitor mattis at at leo. Nam id interdum elit.</p>

                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer a ante eget dolor ultrices iaculis. Nunc varius faucibus dui, et pharetra urna imperdiet ut. Nulla et eleifend libero. Integer sodales ornare risus at scelerisque. Aliquam quis tincidunt erat, eu molestie mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla interdum mollis ultricies. Proin urna justo, luctus in felis quis, ultricies sodales odio. Donec pretium neque sit amet nisl rutrum, bibendum tempor orci dignissim. In auctor purus id enim pellentesque sollicitudin.</p>

                    <p>Nunc sagittis mauris consequat felis pharetra condimentum. Maecenas a nisl sit amet lorem molestie imperdiet quis eget diam. Curabitur eleifend purus quis dui semper lobortis. Proin pharetra at elit et consectetur. Nullam scelerisque eros massa, in lobortis augue fringilla non. Aenean et rutrum arcu. Mauris sem nisl, pulvinar vitae sem vitae, pharetra posuere libero.</p>

                    <p>Vestibulum a arcu vel tellus commodo dapibus at a nibh. Curabitur lobortis diam ut elit mollis viverra. Cras ultricies, elit eu tempus eleifend, metus enim fringilla purus, et lacinia urna mi sit amet nibh. Vestibulum congue magna eget ante sagittis, quis fringilla sapien mattis. Maecenas at hendrerit velit. Donec lacinia, sem sed gravida fermentum, est eros ullamcorper eros, in congue risus purus eu mauris. Aliquam posuere lorem et posuere viverra. Pellentesque at ullamcorper lacus. Donec nunc arcu, elementum sit amet diam a, elementum vulputate urna. Donec id urna hendrerit, lobortis velit vitae, tempor eros. Proin vel massa augue.</p>
                </div>
            </div>
            <div class="center">
                <div>
                    <p>Cras sed tincidunt ligula. Suspendisse in ipsum et nulla eleifend sodales. Donec justo mauris, fermentum dignissim lectus vitae, dignissim interdum est. Aenean commodo tincidunt lacinia. Suspendisse luctus adipiscing auctor. Quisque porttitor feugiat leo, eu feugiat elit mollis sit amet. Vivamus eget dignissim nisl. Aliquam vitae lorem ac quam porttitor mattis at at leo. Nam id interdum elit.</p>

                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer a ante eget dolor ultrices iaculis. Nunc varius faucibus dui, et pharetra urna imperdiet ut. Nulla et eleifend libero. Integer sodales ornare risus at scelerisque. Aliquam quis tincidunt erat, eu molestie mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla interdum mollis ultricies. Proin urna justo, luctus in felis quis, ultricies sodales odio. Donec pretium neque sit amet nisl rutrum, bibendum tempor orci dignissim. In auctor purus id enim pellentesque sollicitudin.</p>

                    <p>Nunc sagittis mauris consequat felis pharetra condimentum. Maecenas a nisl sit amet lorem molestie imperdiet quis eget diam. Curabitur eleifend purus quis dui semper lobortis. Proin pharetra at elit et consectetur. Nullam scelerisque eros massa, in lobortis augue fringilla non. Aenean et rutrum arcu. Mauris sem nisl, pulvinar vitae sem vitae, pharetra posuere libero.</p>
                </div>
            </div>
            <div class="right">
                <div>
                    <p>Nunc sagittis mauris consequat felis pharetra condimentum. Maecenas a nisl sit amet lorem molestie imperdiet quis eget diam. Curabitur eleifend purus quis dui semper lobortis. Proin pharetra at elit et consectetur. Nullam scelerisque eros massa, in lobortis augue fringilla non. Aenean et rutrum arcu. Mauris sem nisl, pulvinar vitae sem vitae, pharetra posuere libero.</p>

                    <p>Vestibulum a arcu vel tellus commodo dapibus at a nibh. Curabitur lobortis diam ut elit mollis viverra. Cras ultricies, elit eu tempus eleifend, metus enim fringilla purus, et lacinia urna mi sit amet nibh. Vestibulum congue magna eget ante sagittis, quis fringilla sapien mattis. Maecenas at hendrerit velit. Donec lacinia, sem sed gravida fermentum, est eros ullamcorper eros, in congue risus purus eu mauris. Aliquam posuere lorem et posuere viverra. Pellentesque at ullamcorper lacus. Donec nunc arcu, elementum sit amet diam a, elementum vulputate urna. Donec id urna hendrerit, lobortis velit vitae, tempor eros. Proin vel massa augue.</p>
                </div>
            </div>
        </div>
    </body>
</html>

这比我之前的回答要好得多。它使用display:table和display:table-cell来使div的行为与他们的表格单元格相似，而无需使用表格。

<强>买者这在旧浏览器中不起作用。检查http://caniuse.com是否兼容

3个并排的div - 中心一个固定宽度，其他一个占据屏幕空间的其余部分

4 个答案: