嵌套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調整大小，但它們不

回答

相關問題