为 div 组设置相同的高度

Question

在一个部分中，我有 4 个 div。第一个 div 浮动到左侧，当前具有以像素为单位的宽度和高度。我想要的是根据另一个 div 的高度动态生成高度。我很困惑。这是我的 jsfiddle： https://jsfiddle.net/ksaluja/62o7ydan/谢谢！

<section>
<div class="attempt">

</div>
<div>
    <ul id="menu">
        <li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li>
        <li><a style="background:#788291">Button2</a></li>
    </ul>
</div>

<div>
    <H2>TITLE</H2>
    <p>
        BADKADA
    </p>
    <p>
        Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
    </p>
    <p>
        Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
    </p>

    <p>
        Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring.
    </p>
</div>

<div>
    <H2>TITLE2</H2>
    <p>
        BADKADA
    </p>
    <p>
        Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
    </p>
    <p>
        Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium
    </p>

    <p>
        Fusce luctus Fusce luctus ipsum in dui accumsan, posuere scelerisque lacus ultrices. Quisque quis ultricies nunc. Nam augue magna, eleifend id mi vel, pretium fring.
    </p>
</div>
</section>

CSS

.attempt {
    float:left;
    width: 15px;
    height: 1290px;
    background: #3F4E64;
    margin-right:20px;
}

Answer 1

If you're able to use them，灵活的盒子让你的事情变得更容易。您可以制作 section display: flex，并将右侧列的内容全部移动到同一个容器中。 CSS 会是这样的：

section {
  display: flex;
}

.attempt {
  width: 15px;
  background: #3F4E64;
  margin-right:20px;
}

...和 HTML:

<section>
  <div class="attempt">...</div>
  <div>The rest of the content...</div>
</section>

这里是demonstration JSFiddle.

Answer 2

您可以通过 CSS flexbox 实现此布局。

将 section 设为弹性容器，将 div 转换为弹性项目。

但是将最后三个 div 包裹在一个嵌套的 flex 容器中。现在 section 有两个弹性项目，并排，并且 共享相同的高度 。无需花车或声明的高度。每列将跟踪另一列。内容较高的列设置两者的高度。

CSS

.outer-flex-container {
    display: flex;
}

.attempt {
    width: 15px;
    background: #3F4E64;
    margin-right: 20px;
}

HTML

<section class="outer-flex-container">

    <div class="attempt"></div><!-- flex item #1 -->

    <section class="inner-flex-container"><!-- flex item #2 -->
        <div>
            <ul id="menu">
              <li><a style="background:#3F4E64" href="/html/default.asp">Button1</a></li>
              <li><a style="background:#788291">Button2</a></li>
            </ul>
        </div>

        <div>
            <H2>TITLE</H2>
            <p>BADKADA</p>
            <p>Fusce luctus ipsum in dui accumsan...</p>
            <p>Fusce luctus ipsum in dui accumsan...</p>
            <p>Fusce luctus Fusce luctus ipsum in...</p>
        </div>

        <div>
            <H2>TITLE</H2>
            <p>BADKADA</p>
            <p>Fusce luctus ipsum in dui accumsan...</p>
            <p>Fusce luctus ipsum in dui accumsan...</p>
            <p>Fusce luctus Fusce luctus ipsum in...</p>
        </div>
    </section><!-- END .inner-flex-container -->

</section><!-- END .outer-flex-container -->

Revised Demo

在此处详细了解使用 flexbox 的等高列：

请注意，所有主要浏览器都支持 flexbox，except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in 。

Answer 3

您可以通过将 display:table 设置为 section 并将 display:table-cell 设置为其中的两个 div（即 .attempts div 及其兄弟姐妹）。使用这个你不需要设置浮动或高度。

DEMO

CSS:

section {
  display: table;
}
.attempt {
    display:table-cell;
    width: 15px;    
    background: #3F4E64;
    margin-right:20px;
}
section div{
    display:table-cell;
}

为 div 组设置相同的高度

Set equal height for group of divs

html

css

css-float

flexbox