根据行数浮动

Question

我正在努力实现以下目标：我有 2 个元素。如果屏幕足够大，我想让第二个漂浮在右边：

--------el1--------               --------el2--------|

但如果屏幕太小则不会：

--------el1--------             |
--------el2--------             |

我试过使用 .container::first-line .el2{float: right;} 和一些 html 比如

<div class="container">
  <div class="el1"></div>
  <div class="el2"></div>
</div>

和.el1, .el2{display: inline-block;} .它失败。有趣的是，如果您在开发工具中查看它（在 Chrome 上），浮点数属性在例外情况下显示为活动状态，但显示会忽略它。

http://jsfiddle.net/c9f2hf9z/1/

有线索吗？

Answer 1

您可以使用 flexbox 位置：http://jsfiddle.net/xj98t1s9/2/

CSS

.container { 
    border: solid 1px black; 

    /* enable flexbox on container */
    display: flex;

    /* wrap the elements contained */
    flex-wrap: wrap;

    /* add a space between elements so they are aligned with the edges */
    justify-content: space-between;
}

HTML

<div class="container">
    <div>should be left</div>
    <div>should be right</div>
</div>

.container 的直接子元素将排成一行，直到它们有足够的空间（尝试在 jsfiddle 上拉伸 result 面板）。另请注意，对于此示例而言，类名并不是真正必需的，因此您可以简化标记。

注意 different support (and syntax) across browser of flexbox module. A good tutorial on the subject can be found on CSS Tricks

根据行数浮动

float depending on number of lines

css

css-float