css左浮动和右浮动

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)，而不是一种容量有限且从未打算用于构建布局(浮动)的老方法？

使用CSS3 柔性箱(柔性箱)，您可以快速、简单和高效地构建布局。

这是你所需要的

(删除内联样式)

<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;
}

演示

Flexbox福利：

1. 极小的代码；非常有效
2. 对中，无论是垂直的还是水平的，都是简单和容易的。
3. 等高柱既简单又简单
4. 对齐flex项的多个选项
5. 是有反应的
6. 这是CSS布局的未来

请注意，所有主要浏览器，http://caniuse.com/#search=flex都支持flexbox。最近的一些浏览器版本，如Safari 8和IE10，需要https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix。要快速添加所需的所有前缀，请将您的CSS张贴在左侧面板中：https://autoprefixer.github.io/。

Answer 2

如果您想将div分割成两个50%宽的元素，您就不能像在那里那样做。

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

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