將div高度更改爲2 div

我正在使用twitter bootstrap，並且找不到此問題的任何答案。我正在嘗試改變div的高度以適合旁邊兩個div的高度。我不知道這是否是很好的解釋，所以我會嘗試使用圖片顯示我的問題。如何從這個作出：將div高度更改爲2 div

到這樣的事情：

HTML：

<div class ="col-md-4 main-card-wrapper"> 
<div class="main-card">1</div> 
</div> 
<div class ="col-md-4 main-card-wrapper"> 
<div class="main-card">2</div> 
</div> 
<div class ="col-md-4 main-card-wrapper"> 
<div class="main-card">3</div> 
</div> 
<div class ="col-md-12 main-wrapper"> 
<div class ="col-md-4 main-card-wrapper"> 
    <div class="main-card">4</div> 
</div> 
<div class ="col-md-8 main-wrapper"> 
<div class ="col-md-6 main-card-wrapper"> 
    <div class="main-card">5</div> 
</div> 
<div class ="col-md-6 main-card-wrapper"> 
    <div class="main-card">6</div> 
</div> 
<div class ="col-md-12 main-card-wrapper"> 
    <div class="main-card">7</div> 
</div> 
</div> 
</div>

CSS：

.main-card-wrapper { 
    padding-left: 0.1em !important; 
    padding-right: 0.1em !important; 
} 
.main-wrapper { 
    padding-left: 0em !important; 
    padding-right: 0em !important; 
} 
.main-card { 
    display: inline-block; 
    padding: 2em; 
    width: 100%; 
    margin: 0.1em; 
    color: #ddffdd; 
    background-color: #879eff; 
    text-align: center; 
} 
.main-card:hover { 
    color: #f4f4f4; 
    background-color: #6185ff; 
}

來源

2016-10-31 Remigiusz

而不是試圖破解的辦法。你應該看看使用'Flexbox'。這是一個關於Flexbox的css-tricks指南。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

試着給你想要調整一個獨特的類或ID的div，然後在CSS給它的高度100％或自動。

來源

2016-10-31 12:18:13 weinde

如果您將一個網格嵌套在另一個網格中，那麼當您向其添加內容時，數字4將能夠獲得它自己的列的完整高度。如果你只是給它們添加一些固定的高度，它就會起作用。

HTML

<div class="row"> 
<div class="col-md-4 1">1</div> 
<div class="col-md-4 2">2</div> 
<div class="col-md-4 3">3</div> 
</div> 
<div class="row"> 
<div class="col-md-4 4">4</div> 
<div class="col-md-8 row"> 
<div class="col-md-6 5">5</div>  
<div class="col-md-6 6">6</div> 
    <div class="row"> 
    <div class="col-md-12 7">7</div> 
    </div> 
</div>

CSS

.1, .2 , .3, .5, .6, .7 { 
    height: 100px; 
} 
.4 { 
    height: 200px; 
}

來源

2016-10-31 12:29:11 wscourge

將div高度更改爲2 div

回答

相關問題