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

您可以使用propMaybe = (obj, prop, data, optCalc) -> if data? obj[prop] = if optCalc? then optCalc(data) else data propMaybe ogData, 'description', articleData.summary propMaybe ogData, 'title', articleData.title1p propMaybe ogData, 'image', articleData.imageFile, (file)-> "#{articlePicDir}/#{file}"职位：http://jsfiddle.net/xj98t1s9/2/

<强> CSS

flexbox

HTML

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

<div class="container"> <div>should be left</div> <div>should be right</div> </div>的直接子元素将在一行中对齐，直到它们有足够的空间（尝试在jsfiddle上拉伸结果面板）。另请注意，此示例并非真正需要类名，因此您可以简化标记。

了解flexbox模块浏览器的different support（及语法）。有关该主题的优秀教程可以在CSS Tricks

上找到

浮动取决于行数

1 个答案: