相同的高度2列

Question

我希望这两个列.list_of_groups和.group_management的高度相同。我尝试使用margin: 0 auto和height: 100%。没有变化。第二列总是高于第一列。

我该怎么做？

#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

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