同じ高さ2列

Question

.list_of_groupsと.group_managementの2つの列を同じ高さにします。私はmargin: 0 autoとheight: 100%を使ってみました。変更はありません。第2列は常に第1列よりも背が高い。

どうすればいいですか？

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

Answer 1

ではなくfloatを使用しての列を作成するために、親にdisplay: flex; flex-wrap: wrapを追加します。デフォルトでは、これらの2つの列は同じ高さになるよう「ストレッチ」されます。

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