css - 水平对齐两行div

我有几行按钮，我希望一个左对齐，另一个右对齐 - 但在单独的一行上。

如果我使用表格，我会这样做:

<table>
<tr>
<td>Content Left Aligned</td>
</tr>
<tr>
<td align="right">Content Right Aligned</td>
</tr>
</table>

但我尝试在这里使用 CSS 和 div。这就是我所拥有的:( JSFiddle )

    <div style='text-align:left;'>

        <div class="btn1 rounded-corners">  
            Green
        </div>

        <div class="btn1 rounded-corners">
            Blue
        </div>

        <div class="btn1 rounded-corners">
            Purple
        </div>
    </div>      
    <div style="clear:all;">&nbsp;</div>


    <div style='text-align:right;'>
        <div class="btn2 rounded-corners">
            Six 
        </div>                  

        <div class="btn2 rounded-corners">
            Seven
        </div>                  

        <div class="btn2 rounded-corners">
            Eight
        </div>          
    </div>      
    <div style="clear:all;">&nbsp;</div>

我这个 CSS 做错了什么？ (请参阅JSFiddle，了解正在发生的事情的工作示例 - 其中有一些样式，我不想在这里弄乱)

最佳答案

替换float:left与 display:inline-block

Updated Fiddle

float用于非常特定的目的。配售 <div> s 在同一行不是吗;)

关于css - 水平对齐两行div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14269922/