Question

我有这个结构：

#container {
  background: red;
  width: 100%;
  float: left;
}
section {
  width: 50%;
  float: left;
}
#section1 {
  background: blue;
}
#section2 {
  background: cadetblue;
}
ul {
  background: green;
}

<div id="container">
  <section id='section1'>My list
    <ul id='list1'>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
    </ul>
  </section>
  <section id='section2'>My other list
    <ul id='list2'>
      <li>something</li>
    </ul>
  </section>
</div>

我希望两个UL在不使用JS的情况下保持相同的高度。我假设我必须让section div匹配，然后让他们父母100％的身高。我无法弄清楚这一点。我试过this文章，但我必须遗漏一些东西。

小提琴： https://jsfiddle.net/011gaa3w/

Answer 1

flexbox可以非常简单地使用现有结构。

＆＃13;

#container {
  background: red;
  display: flex;
}
section {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
#section1 {
  background: blue;
}
#section2 {
  background: cadetblue;
}
ul {
  background: green;
  flex: 1;
}

＆＃13;

<div id="container">
  <section id='section1'>My list
    <ul id='list1'>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
    </ul>
  </section>
  <section id='section2'>My other list
    <ul id='list2'>
      <li>something</li>
    </ul>
  </section>
</div>

＆＃13;

Answer 2

尝试使用此示例中的display:table;和display:table-cell;：http://jsfiddle.net/rc3cfgo5/

Answer 3

为两个列表创建一个CSS类 -

.fixed-height {
    min-height: 6.0em;
}

并将其添加到两个

<div id="container">
<section id='section1'>My list
    <ul id='list1' class="fixed-height">
        <li>something</li>
        <li>something</li>
        <li>something</li>
        <li>something</li>
    </ul>
</section>
<section id='section2'>My other list
    <ul id='list2' class="fixed-height">
        <li>something</li>
    </ul>
</section>
</div>

如何使UL与其堂兄的尺寸相同？

3 个答案: