填充事業部高度

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檢測彎曲能力是否存在，並提供備用的風格，其中必要。 ] 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>

Answer 2

填補了國內空白有兩種選擇：

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>

Answer 3

使用顯示：內聯 - 塊，而不是浮動：左。

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

獲取的divs最大高度爲所有div S設定。

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

您可以使用表格我。這是一個不錯的選擇。 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代替％。您還可以設置最小高度和最大高度在#wrapper指定
• ，顯示：彎曲

Answer 9

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的救援;）