填充事业部高度
问题描述：
我写一个html代码：填充事业部高度
#wrapper {
width: 100%;
}
.divs {
width: 45%;
height: 100%;
border: 1px solid black;
float: left;
}<div id="wrapper">
<div class="divs">
cell 1<br />
more information
</div>
<div class="divs">
cell2
</div>
<div class="divs">
cell 3<br />
more information
</div>
<div class="divs">
cell 4
</div>
</div>在我的代码，我的一些细胞具有信息及其他信息没有。我想填补单元格1和单元格4之间的差距。我如何填补这个空白？
注：我的细胞是动态的，我不知道计数和信息。
答
用自己的代码
一个CSS的解决方案，我认为你有兴趣使用flex，这将解决您的问题。
更新
注：这并不适用于IE9工作[如果你有这个担心用完 使用modernizr检测弯曲能力是否存在，并提供备用的风格，其中必要。 ] IE10支持。
#wrapper {
width: 100%;
display: flex;
flex-wrap:wrap;
}
.divs {
width: 45%;
border: 1px solid black;
}<div id="wrapper">
<div class="divs">
cell 1<br />
more information
</div>
<div class="divs">
cell2
</div>
<div class="divs">
cell 3<br />
more information
</div>
<div class="divs">
cell 4
</div>
<div class="divs">
cell 3<br />
more information
</div>
<div class="divs">
cell 3<br />
more information
</div>
</div>
答
填补了国内空白有两种选择：
1：您可以使用masonry js
2：使用下面的代码
#wrapper {
width: 100%;
}
.divs {
width: 45%;
height: 100%;
border: 1px solid black;
float: none;
display: inline-block;
vertical-align: top;
}<div id="wrapper">
<div class="divs">
cell 1<br />
more information
</div>
<div class="divs">
cell2
</div>
<div class="divs">
cell 3<br />
more information
</div>
<div class="divs">
cell 4
</div>
</div>
答
使用显示：内联 - 块，而不是浮动：左。
#wrapper {
width: 100%;
}
.divs {
width: 45%;
border: 1px solid black;
display: inline-block;
}<div id="wrapper">
<div class="divs">
cell 1<br />
more information
</div>
<div class="divs">
cell2
</div>
<div class="divs">
cell 3<br />
more information
</div>
<div class="divs">
cell 4
</div>
</div>
答
获取的
divs最大高度为所有divS设定。
$(document).ready(function(){
var maxHei = 0;
$('.divs').each(function(){
if(maxHei<$(this).height())
maxHei = $(this).height();
})
$('.divs').css('height',maxHei);
})#wrapper {
width: 100%;
}
.divs {
width: 45%;
border: 1px solid black;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="wrapper">
<div class="divs">cell 1<br />more information</div>
<div class="divs">cell2</div>
<div class="divs">cell 3<br />more information</div>
<div class="divs">cell 4</div>
</div>
答
您可以使用表格我。这是一个不错的选择。 Example
<table>
<tr>
<td>test <br/>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
</table>
的CSS
table {
width:100%;
border: 1px solid black;
}
table tr{
border-bottom: 1px solid black;
}
table tr:last-child
{
border-bottom:0;
}
table tr td {
border-right: 1px solid black;
}
table tr td:last-child
{
border-right:0;
}
答
使用这个脚本。它会占用每个div的高度，并且会更新最大的一个。
$height = 0;
$('.divs').each(function(){
console.log($(this));
if($(this).height()>$height) {
$height = $(this).height();
}
});
$('.divs').height($height);
答
或者你可以做这样的
html, body {
margin: 0;
height: 100%;
}
div#wrapper {
width: 100%;
height: 100%;
}
div#wrapper .divs {
width: 45%;
height: inherit !important;
border: 1px solid black;
float: left;
}
答
你可以做的选项之一：
- 高度VH代替％。您还可以设置最小高度和最大高度在#wrapper指定
- ，显示：弯曲
答
Flexbox，就可能是非常有用的在这种情况下，仅仅使用flex-wrap rule。你只需要稍微修改你的CSS：
#wrapper {
display: flex;
flex-wrap: wrap;
}
.divs {
\t flex: 50%;
box-sizing: border-box;
border: 1px solid black;
float: left;
}<div id="wrapper" >
<div class="divs">
cell 1<br />
more information
</div>
<div class="divs">
cell2
</div>
<div class="divs">
cell 3<br />
more information
</div>
<div class="divs">
cell 4
</div>
</div>Flexbox的救援;）
你希望它看起来像一个桌子？ –
如果您希望针对不同的div有不同的高度，请使用类似https://masonry.desandro.com/的内容。否则，我会建议你去为所有divs提供在css中提到的相同高度 –
你的目标是什么？定义你想要得到的最终结果是什么！ 你已经将它们写成“单元格”，然后宣布单个div的宽度为45％。这意味着最多只有2个div会并排出现，其他则会绕回到下一行。使用浮动进一步让他们摆脱正常的布局流程。是具体的 –