定位兩個可變寬度的直列塊相對於彼此

我有我想通過以下方式定位兩個可變寬度的元素：如果他們適合彼此相鄰屏幕上定位兩個可變寬度的直列塊相對於彼此

或在他們的共同容器中，我希望它們與其相對的兩邊對齊（即第二個與右邊對齊）。
如果他們不這樣做，我希望他們一個在另一個之上，但都對齊到左邊。

事情就這麼簡單：

<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

定位兩個可變寬度的直列塊相對於彼此

回答

相關問題