Question

我很清楚HTML / CSS中“溢出”的概念。但在这里，我陷入了一个非常简单的问题。

    #wrapper {
      width: 100%;
    }
    aside {
      width: 30%;
      text-align: justify;
      float: left;
    }
    section {
      width: 70%;
      text-align: justify;
    }

<div id="wrapper">
  <aside>Aside</aside>
  <section>Section</section>
</div>

我的包装div由旁边和section组成。我试图将它们与容器的总宽度并排排列。但它似乎总是溢出。我想知道为什么？ “外加”部分的总宽度从未超过其包装容器的宽度。仅当我将overflow:hidden放入该部分时才有效。

Answer 1

要克服if (last_location) { dataTableSettings["oSearch"] = {"sSearch": last_location}; }溢出的影响，您需要做的就是在该部分设置section到overflow。现在，您无需在auto上设置float，...

section

#wrapper {
      width: 100%;
    }
    aside {
      width: 30%;
      text-align: justify;
      float: left;
      background: green;
    }
    section {
      width: 70%;
      text-align: justify;
      overflow:auto;
      background: red;
    }

但请注意，如果<div id="wrapper"> <aside>Aside</aside> <section>Section Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo pariatur odit! Nobis impedit quibusdam a explicabo quod in molestias amet nemo fugiat excepturi nisi placeat ex est sequi distinctio.</section> </div>的内容（任何子元素）正在扩展section的边界，则会导致section上的滚动条。所以记住这一点。您也可以使用section，它在您的情况下也可以正常工作，但是任何超出overflow:hidden边界的内容都将被隐藏。如果是section，您可以执行以下操作来防止此行为。将overflow:hidden作为image的子元素的示例可能如下所示。

section

#wrapper {
    width: 100%;
}
aside {
    width: 30%;
    text-align: justify;
    float: left;
    background: green;
}
section {
    width: 70%;
    text-align: justify;
    background: yellow;
    overflow:hidden;
}
section img {
    width:100%;
    height: auto;
}

防止内容环绕浮动元素

1 个答案: