Question

想知道我是否可以在这里得到一些帮助。在小提琴中，我有大部分必要的标记。

我无法弄清楚如何使第1列中的columnItem扩展到行的底部。我希望在第1列中看到绿色填充红色部分，同时留下相同大小的黑色内容。

我认为这是不可能的，祝你好运，我已经受够了。

Answer 1

我实际上已经删除了相当多的代码，所以如果你需要那些额外的div，请提前道歉（但是以后添加它们应该不会太难）。此外，你可能想在IE中测试这个 - 我不确定这个版本是什么（但我觉得它适用于IE7 +）。

<强> HTML

<div class="row">
 <div class="column">
  <div class="columnItem">
   <p>Content</p>
  </div>
 </div>
 <div class="column">
  <div class="columnItem">
   <p>Content</p>
  </div>
  <div class="columnItem">
   <p>Content</p>
  </div>
 </div>
</div>

<强> CSS

.row {
 overflow:hidden;
}
.column {
 float:left;
 width:50%;
 padding-bottom:10000px;
 margin-bottom:-10000px;
}

/* You can remove everything under this comment */
.columnItem {
 padding:10px;
 margin:5px;
 background:blue;
}
.column:nth-of-type(1) {
 background:yellow;
}
.column:nth-of-type(2) {
 background:pink;
}

工作原理

这真的很简单。每行都隐藏了实际内容所在的所有内容（使用overflow:hidden;，而每列使用padding-bottom:10000px;向下推动10,000像素，然后使用margin-bottom:-10000px;再次备份。像素数可以是增加或减少，只需确保它足够大以适合您的内容。

P.S。 - 一切皆有可能，不可能只需要更长的时间。 ~NSA

Answer 2

Omer Ben-Nahum建议表格，但我不确定你想要如何标记你的内容。实际上没有办法使用CSS实现这种效果，但您可以使用一些解决方法，使网站具有您能够使其工作的外观。考虑使用Faux Columns作为表的替代。

Answer 3

bfroh的解决方案是我以前曾多次使用的解决方案，但总的来说我通常使用背景图像来模拟这样的情况（其中一个div中的内容不够高）

包装容器的背景图像可以具有整个左div的背景颜色，只需将其设置为'repeat-y'

处理这些问题（根据我的经验）或者非常需要bfroh发布的黑客或像这样的解决方案。

希望它有所帮助！

Answer 4

你不能用css做，但你可以通过javascript方法做到这一点。我不建议这样做，因为这意味着每次内容更改时都必须运行脚本，而且我不确定你什么时候知道它。

如果这个问题对你很重要，我建议你使用表格。

Css列不会填充行高

4 个答案: