divs的行高在行

我喜歡有兩個div彼此面前。問題是，Id喜歡劃分右欄/ 6的高度。這是因爲右側有六個div，它像按鈕一樣工作。我應該怎麼做？我知道使用flexbox是可行的，但是，如何告訴它將高度分割？divs的行高在行

此外，我找到了相同的高度div的javascript解決方案，我應該只添加一些簡單的代碼來分割高度？謝謝您的建議

HTML 
//left side 
    <div id="columnOne"> 
    </div> 

//right side (height of left side /6 
    <div class="columnTwo"> 
    </div> 
    <div class="columnTwo"> 
    </div> 
    <div class="columnTwo"> 
    </div> 
    <div class="columnTwo"> 
    </div> 
    <div class="columnTwo"> 
    </div> 
    <div class="columnTwo"> 
    </div> 


    // Javascript 
    $(".columnTwo").height($("#columnOne").height()

）;

來源

2017-08-02 ragulin

哦是的，對不起，我的代碼看起來完全diferent，我只是用這個作爲簡化的問題，並從其他線程複製代碼..我已經編輯它，現在很好。 @ObsidianAge – ragulin

太棒了;很高興聽到這只是一個輕微的疏忽:)請記住，您還需要更新您的jQuery以匹配新的類;） –

使用Flexbox的，並插入不同的DIV每列：

<div class="columns"> 

<div class="columnOne"> 
</div> 

<div class="columnTwo"> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
</div> 
</div>

有了這個CSS：

.columns { 
    display: flex; 
    flex-flow: row; 
} 

.columnTwo { 
    display: flex; 
    flex-flow: column; 
} 

.columnTwo > div { 
/* w/e you want */ 
flex: 1; 
}

來源

2017-08-02 21:25:47 lilezek

感謝man，那是它，還有一些額外的編碼。 – ragulin

是的，但它沒有JavaScript參與！ – lilezek

我認爲這是necesarry。這是沒有JavaScript的解決方案，我認爲它是解決問題的更好方法。 – ragulin

divs的行高在行

回答

相關問題