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的相等高度列的更多信息：

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请使用Autoprefixer。 this answer中的更多浏览器兼容性详细信息。

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组设置相等的高度

3 个答案: