css Float left 和 Float right 问题

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

既然您是 CSS 的新手，为什么不学习一种具有广泛选项的现代布局技术(flexbox)，而不是一种功能有限且从未用于构建布局( float )的旧方法？

使用 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. react 灵敏
6. > it's the future of CSS layouts

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