Css列不会填充行高

时间:2012-01-06 22:47:28

标签: html css

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

http://jsfiddle.net/theDawckta/54z3J/

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

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

4 个答案:

答案 0 :(得分:2)

我实际上已经删除了相当多的代码,所以如果你需要那些额外的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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

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

希望它有所帮助!

答案 3 :(得分:-1)

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

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