以下是代码:
<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不想采用高度高度:100%来自固定为内容的父div。
如果我给一个测试*绝对位置它需要父div的最大高度,但我不能将所有子div设置为绝对而不破坏屏幕上的自动修复以重新调整大小。
答案 0 :(得分:2)
我将以下代码添加到your example:
@media (min-width: 1200px) {
#content { overflow: hidden; }
#test2, #test3, #test4 {
margin-bottom: -1000px;
padding-bottom: 1000px;
}
}
padding-bottom: 1000px
在每个列的底部添加1000px的填充。
margin-bottom: -1000px;
基本上通过将每列的高度减少1000px来再次删除此填充。现在每列的高度至少为1000px(填充+内容)。
通过提供#content
overflow:hidden
,您无法在每列的底部看到额外的1000px,因此列似乎具有相同的高度(尝试删除overflow:hidden
)以查看他们仍然不同。
媒体查询(@media (min-width: 1200px)
)确保仅在您的列彼此相邻显示时才应用这些附加规则。
答案 1 :(得分:2)
它不起作用的原因是因为父级没有定义的高度。百分比值基于父级的显式高度(或宽度),如果让它自由流动,为什么没有任何反应。
通常,在使用这样的基于列的布局时,您可以使用display:table和table-cell来实现您想要的效果。 I made a simple example to demonstrate this
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>
答案 2 :(得分:0)
将其设置为“position:relative;”要么 “position:absolute; display:block;”