嵌套div应根据其中的div调整大小，但它们不

我不明白为什么rightcontent和leftcontent div不会保留在中心体div中，当“< p>”的数量增加时。嵌套div应根据其中的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>

来源

2017-03-03 Emaad Khan

我想这是因为你的父母DIV其实没有具有特定的宽度。 –

https://css-tricks.com/snippets/css/clear-fix/可能会帮助 –

你可以做几件事情：

浮动#centerbody左或右。
设置#centerbody以显示：inline-block的
使用 “清晰” 的把戏，通过使您的浮动资料核实后空白的div有 “明确：既”

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

如果其他两个选项对于您的项目的其余部分不可行，那么清除技巧就是旧的移动，因为它会将正常的块元素注入到容器中，作为容器的信号用于“结束“的容器应该是。

来源

2017-03-03 17:11:51

使中心体变小。，即使我将宽度设置为100％，白色空间只是延伸到屏幕外，它会变大。 –

嗯，除了高度不适应之外，还有更多的问题，但不是你的问题。您尚未在容器上设置宽度。浮动或嵌入块元素适合其内容。在容器上设置所需的宽度。 –

作为替代方案，您可以设置父容器为柔性盒，让您的父母一个明确的宽度

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>

来源

2017-03-03 17:18:30

你正在把他的权利内容左，反之亦然 –

@HassanZia woops，代码是正确的，只是把“正确的文本”在左侧部分... –

仍然不是它的伙伴 –

你的内容是走出了div的是的正在float编。你可能不知道浮动对它的父母有什么影响。你一定要阅读下面的文章All About Floats

注：这是在CSS中最重要的概念之一（另外一个是position荷兰国际集团），所以我建议您阅读提到的文章。

如果你想快速的答案，然后做到这一点：

{parent-div}:before, {parent-div}:after{ 
    clear: both; 
    content: ""; 
    display: block; //or inline-block 
}

什么clear和content做的是提到的文章中很好地解释。

来源

2017-03-03 17:21:57 Ashish1269

认为这是一篇必读文章 –

请选中修改历史摸清楚

也许这是你在找什么

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; 
 
}

<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>

来源

2017-03-03 17:23:54

嵌套div应根据其中的div调整大小，但它们不

回答

相关问题