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元素的分层垂直和水平划分

回答

相关问题