HTML元素的分層垂直和水平劃分

如果已經回答了這個問題，我表示歉意，這似乎是一個基本問題，但我一直無法找到解決方案。HTML元素的分層垂直和水平劃分

問題：

我想安排在此佈局中的HTML元素（其中a和b是任意的元素）：

aa 
a 
bb 
b

實施例：

我試圖這，使用按鈕作爲任意元素（JSFiddle link）：

<!DOCTYPE html> 
<html> 

    <head> 
     <style> 
      .left { 
       float: left; 
       /*display: inline-block;*/ 
      } 
     </style> 
    </head> 

    <body> 
     <div> 
      <div class="left"> 
       <div> 
        <button type="button">a</button> 
       </div> 
      </div> 
      <div class="left"> 
       <div> 
        <button type="button">a</button> 
       </div> 
       <div> 
        <button type="button">a</button> 
       </div> 
      </div> 
     </div> 
     <div> 
      <div class="left"> 
       <div> 
        <button type="button">b</button> 
       </div> 
      </div> 
      <div class="left"> 
       <div> 
        <button type="button">b</button> 
       </div> 
       <div> 
        <button type="button">b</button> 
       </div> 
      </div> 
     </div> 
    </body> 

</html>

但我得到這個：

aabb 
a b

當我使用inline-block，而不是我得到這個（仍然是錯的）：

a 
aa 
b 
bb

任何解決方案？我應該使用不同的方法嗎？

來源

2015-06-24 Adelost

把一個包裝類到你周圍的div：

<div class="wrapper"> 
     <div class="left"> 
      <div> 
       <button type="button">a</button> 
      </div> 
     </div> 
     <div class="left"> 
      <div> 
       <button type="button">a</button> 
      </div> 
      <div> 
       <button type="button">a</button> 
      </div> 
     </div> 
    </div>

，並使用此CSS：

.left { 
    float: left; 
} 

.wrapper { 
    display: block; 
    float: left; 
    width: 100%; 
}

例子：https://jsfiddle.net/L7qd0vr3/3/

來源

2015-06-24 13:09:47 Asgaros

你的HTML是錯誤的。使用clear：both和fix html。

<div> 
     <div class="left"> 
      <div> 
       <button type="button">a</button> 
      </div> 
     </div> 
     <div class="left"> 
      <div> 
       <button type="button">a</button> 
      </div> 
      <div> 
       <button type="button">a</button> 
      </div> 
     </div> 
    </div>

應該

<div> 
     <div class="left"> 
      <div> 
       <button type="button">a</button> 
      </div> 
      <div> 
       <button type="button">a</button> 
      </div> 
     </div> 
     <div class="left"> 
      <div> 
       <button type="button">a</button> 
      </div> 
     </div> 
    </div>

來源

2015-06-24 13:10:27 JGABBA

你的意思是這樣的嗎？ http://jsfiddle.net/L7qd0vr3/1/ 仍然，看起來不像我的例子。 – Adelost

不好意思說要用清：兩者; http://jsfiddle.net/jgavin/o1t6azwL/ – JGABBA

HTML元素的分層垂直和水平劃分

回答

相關問題