css - DIV的位置和高度

Question

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

我做了一个简单的例子来说明我当前的问题是什么：

编辑：更新的 jsFIDDLE 抱歉，这有点乱，但我只是想让它工作。如您所见，我在其中一条垂直线上强制设置了一个高度（但没关系。那条线应该是固定高度）。我遇到问题的垂直线是“图片下载”和“视频下载”之间的一条

http://jsfiddle.net/GLjND/

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

我有很多 div，我想我的问题出在某个地方的某个父母身上，但我无法弄清楚。

基本上我有一个包装器，我有 2 个内容区域。在此示例中，它们是“第一”和“第三”。“第二条”是一条垂直虚线，我想将其粘贴在这些区域之间，并且此 div 的高度（包含带有重复 y 的垂直虚线图像）应该与包装器的高度相匹配，而包装器的高度反过来由其他两个 div 中最大的一个（“第一个”和“第三个”）定义。

我该怎么做？

提前致谢！:)

Answer 1

干得好。 http://jsfiddle.net/GLjND/3/（黄色背景只是为了让您可以看到新的 div）

只给div

display: table-cell

你就完成了。

Answer 2

当您使用 float 属性时，我建议您将 overflow:hidden 设置为父 div

#wrapper{
   overflow:hidden;
}

对于#second，您已将高度设置为 100%，为此，您应该为父 div 固定一个高度

  #wrapper{
   height:400px;
}

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

Answer 3

这是 -小提琴

<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 4

只需给出 CSS 属性：

overflow : hidden
display : table-cell