相同高度2列

我希望那兩列.list_of_groups和.group_management的高度相同。我試圖用margin: 0 auto和height: 100%。沒有變化。第二列總是比第一列高。相同高度2列

我該怎麼做？

#show_groups { 
 
    background-color: black; 
 
    border: 3px dashed red; 
 
    font-size: 1.4em; 
 
} 
 

 
#group_examiner { 
 
    width: 100%; 
 
    background-color: lightblue; 
 
    text-align: center; 
 
} 
 

 
#list_of_groups { 
 
    float: left; 
 
    width: 30%; 
 
    background-color: blue; 
 
    margin: 0 auto; 
 
} 
 

 
#group_management { 
 
    float: left; 
 
    width: 70%; 
 
    background-color: lightgreen; 
 
    margin: 0 auto; 
 
} 
 

 
#group_list { 
 
    width: 25%; 
 
    background-color: red; 
 
    float: left; 
 
    text-align: center; 
 
    margin-top: 5%; 
 
    margin-left: 5%; 
 
} 
 

 
#group_options { 
 
    width: 65%; 
 
    background-color: green; 
 
    float: left; 
 
    text-align: center; 
 
    margin-top: 5%; 
 
    margin-right: 5%; 
 
}

<div id="show_groups"> 
 

 
    <div id="group_examiner">first</div> 
 
    <div id="list_of_groups">second</div> 
 
    <div id="group_management"> 
 

 
    <div id="group_list">third</div> 
 
    <div id="group_options">forth</div> 
 

 
    </div> 
 

 
</div>

來源

2017-06-09 marcin7848

這個問題被問萬次。你問過之前你甚至搜索過嗎？ – tilz0R

我剛在Google搜索了這個問題的標題。看看第一個結果是什麼;）https://css-tricks.com/fluid-width-equal-height-columns/。它詳細解釋了flex方法和表格方法。 – WizardCoder

添加display: flex; flex-wrap: wrap的母體創建列，而不是使用float。默認情況下，這兩列將「拉伸」到相同的高度。

#show_groups { 
 
    background-color:black; 
 
    border:3px dashed red; 
 
    font-size:1.4em; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
#group_examiner { 
 
    width:100%; 
 
    background-color:lightblue; 
 
    text-align: center; 
 
} 
 

 
#list_of_groups { 
 
    width:30%; 
 
    background-color:blue; 
 
} 
 

 
#group_management { 
 
    width:70%; 
 
    background-color:lightgreen; 
 
} 
 

 
#group_list { 
 
    width:25%; 
 
    background-color:red; 
 
    float:left; 
 
    text-align: center; 
 
    margin-top: 5%; 
 
    margin-left: 5%; 
 
} 
 
#group_options { 
 
    width:65%; 
 
    background-color:green; 
 
    float:left; 
 
    text-align: center; 
 
    margin-top: 5%; 
 
    margin-right: 5%; 
 
}


 
    <div id="show_groups"> 
 
     <div id="group_examiner">first</div> 
 
     <div id="list_of_groups">second</div> 
 
     <div id="group_management"> 
 
     
 
     <div id="group_list">third</div> 
 
     <div id="group_options">forth</div> 
 
     
 
     </div> 
 
    </div>

來源

2017-06-09 20:50:53

回答

相關問題