css Float left和Float right issue

Question

我正在尝试将div拆分为两个事件列。第一个div应该左对齐，第二个div应该对齐。

我的解决方案基本上就是以下......

    <div style="width:100%;>            
        <div style="width:50%; float:left;">

        </div>
        <div style="width:50%; float:right;">

        </div>          
    </div>

我的第二栏（我的按钮面板）正在换行。我对css相当陌生，所以对快速解释的帮助将不胜感激。

https://jsfiddle.net/ff2yo9n3/

感谢

Answer 1

如果你想将div分成两个50％宽度的元素，你不能像你那样去做。

两者必须具有相同的浮动元素，否则它们将彼此重叠。这是一个在MDN中解释的广泛主题，称为块格式化上下文。

您可能想要做什么，将两个div设为float: left;和width: 50%;，然后为正确对齐的div设置text-align: right;。

Answer 2

由于您不熟悉CSS，为什么不学习具有多种选项（flexbox）的现代布局技术，而不是那种容量有限并且从不打算用于构建布局（浮动）的旧方法？

使用CSS3 Flexible Boxes (flexbox)，您可以快速，简单，高效地构建布局。

以下是您所需要的一切：

HTML （删除内联样式）

<div class="header">
    <div>Buttons</div>
    <div>
        <a data-code="button" title="Show Source" class="top-button">
           <i class="fa fa-code"></i>
        </a>
    </div>
</div>

CSS （添加了两行代码）

.box .header {
    font-weight:300;
    border-bottom: 1px solid #ccc;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 5px 10px;
    line-height: normal;

    /* new */
    display: flex;
    justify-content: space-between;
}

DEMO

Flexbox的好处：

1. 最小代码;效率很高
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex items
5. 响应
6. it's the future of CSS layouts

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。