瞭解div的行爲

我是新來的HTML和CSS和堆棧溢出社區和我的任務之一，我需要均勻地將多個<div> s彼此相鄰放在一個容器<div>。我使用float:left爲每個內部<div> s。但是當我這樣做時，外部（容器）div一直崩潰到頂部。我所理解的是浮動元素被移出內容的正常流動，並且之後的任何元素都被置於正常流程中。
我需要了解浮動元素的工作風格以及display:inline-block。任何幫助將不勝感激。在其最簡單形式的樣品標記看起來是這樣的：瞭解div的行爲

<style> 
#xouter{ 
    width:80%; 
    margin-left:9%; 
    border:1px solid #000; 
} 
#xleftcol{ 
    float: left; 
    width: 33%; 
    background:#809900; 
} 
#xmiddlecol{ 
    float: left; 
    width: 34%; 
    background:#eff2df; 
} 
#xrightcol{ 
    float:left; 
    width: 33%; 
    background:#d2da9c; 
} 
</style> 
    <body> 
     <div id="xouter"> 
      <div id="xleftcol"> 
      This is the left col : This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col :This is the left col 
      </div> 
      <div id="xmiddlecol"> 
      This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: This is the middlecol: 
      </div> 
      <div id="xrightcol"> 
       This is the rightcol : This is the rightcol : This is the rightcol : This is the rightcol : This is the rightcol : This is the rightcol : This is the rightcol :: 
      </div> 
     </div> 

    </body>

This is a screen shot of what I have: 1- 3 divs with no floating or display property set 2- the same divs but with float-left property 3- lastly, with display:inline-block property (no floating property)

來源

2017-04-24 Mani Malhotra

css中的'''指的是'class'，'#'指的是'id'。 https://codepen.io/anon/pen/BRLmRV –

這是一個問題嗎？問題是什麼？ – garek007