Question

当我尝试构建比平时更复杂的布局时，我有时会对div感到困惑。

我已经做了一个快速示例，展示了我目前的问题：

编辑：更新的jsFIDDLE 对不起，这有点乱，但我只是想让它发挥作用。正如你所看到的，我已经在其中一条垂直线上强制了一个高度（但没关系。该线应该是固定的高度）。我遇到问题的垂直线是＆＃34;下载图片和＃34;和＃34;视频供下载＆＃34;

http://jsfiddle.net/GLjND/

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</div>

我有很多div，我想我的问题出在某个家长的某个地方，但我无法弄清楚。

基本上我有一个包装器，我有2个内容区域。在这个例子中，那些是＆＃34;第一个＆＃34;和＃34;第三＆＃34;。＆＃34;第二＆＃34;是一条垂直的虚线，我想把它们夹在这些区域之间，这个div的高度（包含一个带有repeat-y的垂直虚线图像）应该是包装器的高度，而包装器的高度又是由其他两个div中最大的一个（＆＃34;第一个＆＃34;和＃34;第三个＆＃34;）。

我该怎么做？

提前致谢！：）

Answer 1

你走了。 http://jsfiddle.net/GLjND/3/（黄色背景就是这样，你可以看到新的div）

只要给出divs

display: table-cell

你已经完成了。

Answer 2

这是 - fiddle

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</div>

body{
    padding:0;
    margin:0;
}

#wrapper{
    width:500px;
    height:auto;
    background:red;
}

#first{
    display: table-cell;
    width:230px;
    height:300px;
    background:blue;
}

#second{
    display: table-cell;
    background:white;
    border-left: thick dotted #ff0000;
}

#third{
    display: table-cell;
    width:270px;
    height:350px;
    background:green;
}

Answer 3

当你使用float属性时，我建议你设置overflow：hidden到父div

#wrapper{
   overflow:hidden;
}

对于#second你已经将高度设置为100％，为此工作你应该为父div设置一个高度

  #wrapper{
   height:400px;
}

这是Jsfiddle 希望这将是一个很好的解决方案，并将提供更多信息

Answer 4

只需提供CSS属性：

overflow : hidden
display : table-cell

DIV的位置和高度

4 个答案: