Question

我不明白为什么当“＆lt; p＆gt;”的数量增加时，右内容和左内容div不会停留在centerbody div中。

我附上了会发生什么的照片。 The dots should stay inside the white space. And the white space should auto resize according to the length of the content. Shouldnt it?

<html>

  <style media="screen" type="text/css">

    body {
        background-color: #efefef;
    }

    h1 {
        color: white;
        text-align: center;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
    }

    p {
        font-family: verdana;
        font-size: 20px;
    }

    #centerbody {   /*this is the style of the main body white box */
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0,      0, 0.19);
        border-radius: 5px 5px 5px 5px;
        padding: 20px;
        margin: 100px 50px 100px 50px;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        font-size: 20px;
    }

    #rightContent {
        float:right;
        width: 50%;
        margin-bottom: 20px;
    }

    #leftContent {
        float:left;
        width: 50%;
        margin-bottom: 20px;
    }

  </style>

  <body>

    <div id="centerbody">

      <div id="rightContent">
          <p>.</p>
          <p>.</p>
          <p>.</p>
          <p>.</p>
          <p>.</p>
          <p>.</p>
      </div>

      <div id="leftContent">
          right side stuff
      </div>

    </div>

  </body>

</html>

Answer 1

你可以做一些事情：

向左或向右浮动#centerbody。
设置#centerbody以显示：inline-block
使用“清除”技巧，在你的浮动DIV之后有一个空的DIV，它具有“clear：both”

解释：浮动元素的高度未添加到其容器中。浮动元素DO侦听其他浮动元素的高度。因此，通过将父容器设置为float或inline-block，您可以考虑其子元素的高度。

如果其他两个选项对于项目的其余部分不可行，那么明确的技巧就是旧的举措，因为它将一个正常的块元素注入到容器中，作为容器的信号在“结束”的位置的容器应该是。

Answer 2

作为替代方案，您可以将父容器设置为弹性框，并为父级提供明确的宽度

body {
    background-color: #efefef;
}

h1 {
    color: white;
    text-align: center;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

p {
    font-family: verdana;
    font-size: 20px;
}

#centerbody {   /*this is the style of the main body white box */
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px 5px 5px 5px;
    padding: 20px;
    width: 500px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 100px 50px 100px 50px;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 20px;
}
#rightContent {
    width: 50%;
    margin-bottom: 20px;
}

#leftContent {
    width: 50%;
    margin-bottom: 20px;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<body>

<div id="centerbody">
    
    <div id="leftContent">
        <p>
        hello
        </p>
    </div>
    <div id="rightContent">
        right side stuff
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
        <p>.</p>
    </div>

</div>

</body>

Answer 3

您的内容来自div的{{1}}。你可能不知道浮动对它的父亲有什么影响。您一定要阅读以下文章All About Floats

注意：这是CSS中最重要的概念之一（另一个是float ing），所以我建议你阅读上面提到的文章。

如果您想快速回答，请执行以下操作：

position

在上述文章中详细解释了{parent-div}:before, {parent-div}:after{ clear: both; content: ""; display: block; //or inline-block }和clear做了什么。

Answer 4

请检查修改历史记录以获得清晰的想法

也许这就是你要找的东西

＆＃13;

body {
  background-color: #efefef;
}

h1 {
  color: white;
  text-align: center;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}

p {
  font-family: verdana;
  font-size: 20px;
}

#centerbody {   /*this is the style of the main body white box */
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0,      0, 0.19);
  border-radius: 5px 5px 5px 5px;
  padding: 20px;
  margin: 100px 50px 100px 50px;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 20px;

}

#rightContent {
  float:right;
  text-align: center;
  width: 50%;
  margin-bottom: 20px;
}

#leftContent {
  line-height: 300px;
  vertical-align: middle;
  float:left;
  width: 50%;
  margin-bottom: 20px;
}
#empty{
  clear:both;
}

＆＃13;

<div id="centerbody">

  <div id="leftContent">
    right side stuff
  </div>

  <div id="rightContent">
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
  </div>
  <div id="empty"></div>



</div>

＆＃13;

嵌套的div应该根据它们内部的div来调整大小，但它们不会

4 个答案: