填充事業部高度

我寫一個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之間的差距。我如何填補這個空白？

注：我的細胞是動態的，我不知道計數和信息。

來源

2017-08-10 aminsgi

你希望它看起來像一個桌子？ –

如果您希望針對不同的div有不同的高度，請使用類似https://masonry.desandro.com/的內容。否則，我會建議你去爲所有divs提供在css中提到的相同高度 –

你的目標是什麼？定義你想要得到的最終結果是什麼！你已經將它們寫成「單元格」，然後宣佈單個div的寬度爲45％。這意味着最多隻有2個div會並排出現，其他則會繞回到下一行。使用浮動進一步讓他們擺脫正常的佈局流程。是具體的 –

用自己的代碼

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

來源

2017-08-10 07:30:42 weBBer

是的，這是一個好主意。 –

這不適用於IE9 – Ehsan

是的，但是如果您想要，您可以使用modernizr來檢測是否存在彈性功能，並在必要時提供備用樣式。 Modernizr將向HTML元素添加類如「flexbox」，「no-flexbox」和「flexbox-legacy」。但它從IE10開始得到了支持。 – weBBer

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

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>

來源

2017-08-10 07:26:14

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

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

來源

2017-08-10 07:27:30 Pooja

獲取的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>

來源

2017-08-10 07:33:12 Ehsan

您可以使用表格我。這是一個不錯的選擇。 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; 
}

來源

2017-08-10 07:34:08

使用這個腳本。它會佔用每個div的高度，並且會更新最大的一個。

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

來源

2017-08-10 07:37:07

或者你可以做這樣的

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

來源

2017-08-10 07:37:15

你可以做的選項之一：

高度VH代替％。您還可以設置最小高度和最大高度在#wrapper指定
，顯示：彎曲

來源

2017-08-10 07:39:49

-1

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

來源

2017-08-10 07:55:53 Tedds

填充事業部高度

回答

相關問題