Css DIV的位置和高度

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

我举了一个简单的例子来说明我目前的问题：

编辑：更新的JSFIDLE 对不起，有点乱，但我只是想让它工作起来。如你们所见，我在其中一条垂直线上强制了一个高度（但这没关系，这条线应该是固定高度）。我有问题的垂直线是“下载图片”和“下载视频”之间的垂直线

我有很多div，我想我的问题出在某个地方的某个家长身上，但我无法理解

基本上我有一个包装，我有两个内容区域。在本例中，这些是“第一”和“第三”。 “second”是一条垂直虚线，我想在这些区域之间粘贴，这个div的高度（包含一个带有repeat-y的垂直虚线图像）应该与包装的高度相匹配，包装的高度由另外两个div中最大的一个来定义（“first”和“third”）

我该怎么做

提前感谢！：）

给你。 （黄色背景正好让您可以看到新的div）

给我提琴就行了

display: table-cell

你完成了。

给你-

身体{
填充：0；
保证金：0；
}
#包装纸{
宽度：500px；
高度：自动；
背景：红色；
}
#首先{
显示：表格单元格；
宽度：230px；
高度：300px；
背景：蓝色；
}
#第二{
显示：表格单元格；
背景：白色；
左边框：粗点#ff0000；
}
#第三{
显示：表格单元格；
宽度：270px；
高度：350px；
背景：绿色；
}

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

#wrapper{
   overflow:hidden;
}

  #wrapper{
   height:400px;
}

对于#秒，您已经将height设置为100%，要使其生效，您应该为父div确定一个高度

#wrapper{
   overflow:hidden;
}

  #wrapper{
   height:400px;
}

这是你的电话号码

---

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

只需提供CSS属性：

overflow : hidden
display : table-cell

---

表格单元格破坏了我的布局。我将尝试清理我的实际代码并将其发布在这里，以便您更好地了解我想要的内容=）谢谢，但它不起作用。正如您所看到的，包装器现在是大（高）的方式。此外，它在“可供下载的图片”和“可供下载的视频”div之间的垂直线上不起作用。有什么想法吗？谢谢，但是父目录可以有不同的高度，这取决于里面有多少内容。据我所知，父目录的高度不应该是固定的。如果你觉得这篇文章有用，请投赞成票，但这是一个动态网页。可能有很多内容，因此父div的高度不能固定。它必须是动态的，以适应页面上的内容量。指定高度百分比。百分比是根据生成的框的包含块的高度计算的。尝试将高度：100%指定给包装分区。无论如何，高度自动将不起作用！