2017-06-09 62 views
0

我希望那两列.list_of_groups.group_management的高度相同。我试图用margin: 0 autoheight: 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>

+2

这个问题被问万次。你问过之前你甚至搜索过吗? – tilz0R

+0

我刚在Google搜索了这个问题的标题。看看第一个结果是什么;)https://css-tricks.com/fluid-width-equal-height-columns/。它详细解释了flex方法和表格方法。 – WizardCoder

回答

1

添加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>