Question

我写了一个像这样的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之间填补空白。我怎样才能填补这个空白？

注意：我的细胞是动态的，我不知道计数和信息。

Answer 1

使用您自己的代码的CSS解决方案

我认为您会对使用flex感兴趣，它会解决您的问题。

<强>更新

注意：这不适用于 IE9 [如果您对此用处有疑虑使用modernizr检测是否存在flex功能，并在必要时提供后备样式。 ]来自IE10，它受到支持。

＆＃13;

#wrapper {
    width: 100%;
    display: flex;
    flex-wrap:wrap;
}
.divs {
    width: 45%;
    border: 1px solid black;  
}

＆＃13;

<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>

＆＃13;

Answer 2

获取divs的最大高度并为所有div设置。

$(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>

Answer 3

为填补这一空白，有两种选择：

1：您可以使用masonry js

2：使用以下代码

＆＃13;

#wrapper {
    width: 100%;
}

.divs {
    width: 45%;
    height: 100%;
    border: 1px solid black;
    float: none;
    display: inline-block;
    vertical-align: top;
}

＆＃13;

<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>

＆＃13;

Answer 4

使用display：inline-block而不是float：left。

#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>

Answer 5

您可以为i使用表格。这是一个不错的选择。 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;
}

Answer 6

使用此脚本。它将占用每个div的高度，并将更新最大的一个。

  $height = 0;
  $('.divs').each(function(){
  console.log($(this));
   if($(this).height()>$height) { 
     $height = $(this).height();
   }
  }); 
  $('.divs').height($height);

Answer 7

或者你可以这样做

    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;
}

Answer 8

您可以选择其中一个选项：

高度以vh代替％。您还可以设置min-height或max-height
在#wrapper中，显示：flex

Answer 9

在这种情况下，Flexbox可能非常有用，只需使用flex-wrap rule即可。您只需稍微修改一下CSS：

＆＃13;

#wrapper {
  display: flex;
  flex-wrap: wrap;
}
.divs {
	flex: 50%;
  box-sizing: border-box;
  border: 1px solid black;
  float: left;
}

＆＃13;

<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>

＆＃13;

Flexbox救援;）

填充Div高度

9 个答案: