定位两个可变宽度的直列块相对于彼此

我有我想通过以下方式定位两个可变宽度的元素：如果他们适合彼此相邻屏幕上定位两个可变宽度的直列块相对于彼此

或在他们的共同容器中，我希望它们与其相对的两边对齐（即第二个与右边对齐）。
如果他们不这样做，我希望他们一个在另一个之上，但都对齐到左边。

事情就这么简单：

<div class="container"> 
    <div style="display: inline-block;"> 
    I'm a variable width left element 
    </div> 
    <div style="display: inline-block; float:right;"> 
    I'm right-floating if there's space 
    </div> 
</div>

需要照顾的第一例，但很明显，当容器是下面的第一个要呈现的第二个div足够小，它还是向右浮动这不是我想要的。

这甚至可能用纯CSS？由于未知/可变宽度，我无法使用媒体查询。

来源

2015-12-13 zuza

CSS有很多孔（不能用纯CSS来表示期望的布局）的。如果你把第一个盒子放在左边（也可以使用display：block），但是我发现通常需要一个小小的Javascript。 –

这种布局和行为可能不使用媒体查询flexbox和纯CSS。

HTML

<!-- horizontal alignment when two boxes fit --> 
<div class="container"> 
    <div class="box box1"><span>1</span></div> 
    <div class="box box2"><span>2</span></div> 
</div> 

<!-- vertical alignment when two boxes don't fit --> 
<div class="container"> 
    <div class="box box3"><span>1</span></div> 
    <div class="box box4"><span>2</span></div> 
</div>

CSS

.container { 
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    width: 700px; /* for demo only; can be relative length, as well */ 
} 

.box1 { width: 100px; } 
.box2 { width: 150px; } 
.box3 { width: 400px; } 
.box4 { width: 500px; }

DEMO

注：

当有足够的空间，以适应在同一行两可变宽度的元件，它们在与justify-content: space-between容器的相对端部对齐。
当有没有足够的空间，以适应这两个元素，它们缠上flex-wrap: wrap和调整左，因为justify-content: space-between规则将左对齐时，单是该行的元素。

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

来源

2015-12-13 23:38:42

也可以用正常流量来完成。 http://jsfiddle.net/meajhow4/1/ – Alohci

定位两个可变宽度的直列块相对于彼此

回答

相关问题