0

这是代码：

 <div id="content" class="row shadow" >

    <div id="test2" class="col-lg-4">
      <p>dsfdsfasdfdasfdsafdsfasdf</p>
    </div>

    <div id="test3" class="col-lg-4" style="">
      <p>breerwwerewrqerewrqewqrwqer</p>
   </div>

    <div id="test4" class="col-lg-4">
      <h2>Directlinks</h2>
      <p>BRRRRRRRRRRRRRRRRRRRRRRRRRRRR</p>
    </div>

 </div>

..我想设置：

border-right:1px solid #ddd;

到 id #test2 和 #test3

问题是，div 不想从固定到内容的父 div 中获取 height:100% 的高度。

如果我给一个测试*一个绝对位置，它会占用父 div 的最大高度，但我不能将所有子 div 设置为绝对位置，而不破坏屏幕的自动修复以重新调整大小。

4

3 回答 3

2

它不起作用的原因是因为父级没有定义的高度。百分比值基于父级的显式高度（或宽度，就此而言），为什么如果您让它自由流动，什么都不会发生。

通常，当使用这样的基于列的布局时，您可以使用 display: table 和 table-cell 来实现您想要的。我做了一个简单的例子来证明这一点。

CSS：

.outer {
   display: table;
}
.col {
   display: table-cell;
   border: 1px solid red;
}

HTML：

<div class="outer">
    <div class="col">
        text<br/>
        text<br/>
        text<br/> 
    </div>
    <div class="col">
        text
    </div>
    <div class="col">
        text<br/>
        text<br/>
    </div>
</div>
于 2013-10-29T15:19:46.467 回答
2

我在您的示例中添加了以下代码：

@media (min-width: 1200px) {
    #content { overflow: hidden; }
    #test2, #test3, #test4 {
        margin-bottom: -1000px;
        padding-bottom: 1000px;
    }
}

将padding-bottom: 1000px1000px 的填充添加到每个列的底部。

基本上通过将margin-bottom: -1000px;每列的高度降低 1000 像素来再次删除此填充。现在每列至少有 1000 像素的高度（填充 + 内容）。

通过给#content overflow:hidden你看不到每列底部额外的 1000px，所以列似乎都具有相同的高度（尝试删除overflow:hidden）以查看它们仍然不同。

媒体查询 ( @media (min-width: 1200px)) 确保仅在您的列应彼此相邻显示时应用这些附加规则。

工作示例：http: //jsfiddle.net/R8gH9/3/

于 2013-10-29T14:53:16.970 回答
0

而不是将其设置为“位置：相对；” 或“位置：绝对；显示：块；”

于 2013-10-29T13:49:04.873 回答