如何將塊右移，並將塊b留給純CSS？

移動block b to the left，並用純CSS移動block a to the right（有或沒有Flexbox的），而HTML如下：

.text-container {width: 100%; display: flex;} 
 
.a-block { width: 50%; } 
 
.b-block { width: 50%; } 
 
.b-block img { width: 100%; }

<div class="text-container"> 
 
    <div class="a-block"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus est eu nulla ullamcorper pulvinar. Vestibulum sem mi, tempor in metus vitae, iaculis volutpat purus. Donec at ex auctor, blandit mauris id, egestas ex. Aenean justo ipsum, commodo id accumsan sed, aliquet ac ante. Nam sagittis consequat consectetur. Nullam fringilla, nunc ac tempus fermentum, ante ipsum varius tortor, eget convallis libero metus vitae dolor. Phasellus tempor, turpis faucibus hendrerit ullamcorper, leo nibh commodo metus, a interdum nunc metus quis mauris. Proin libero nisl, consequat sed venenatis at, vehicula eu neque. Nulla ac eleifend risus. Vestibulum rutrum faucibus massa nec vulputate. 
 
    </div> 
 

 
    <div class="b-block"> 
 
    <img src="http://i.imgur.com/kaXCm6C.png"> 
 
    </div> 
 
</div>

就我個人而言，我認爲我可以通過簡單的使用float來移動它們，block a float: right, block b float: left，不幸的是，這並沒有奏效。

來源

2017-02-22 iBrazilian2

由於您使用flex，您可以使用order財產

的CSS order屬性指定用於佈置在其柔性容器彎曲項目的順序。元素按訂單價值的升序排列。具有相同順序值的元素按其在源代碼中的顯示順序排列。

.text-container { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
.a-block { 
 
    width: 50%; 
 
    order: 1; 
 
} 
 

 
.b-block { 
 
    width: 50%; 
 
    order: 0; 
 
} 
 

 
.b-block img { 
 
    width: 100%; 
 
}

<div class="text-container"> 
 
    <div class="a-block"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus est eu nulla ullamcorper pulvinar. Vestibulum sem mi, tempor in metus vitae, iaculis volutpat purus. Donec at ex auctor, blandit mauris id, egestas ex. Aenean justo ipsum, commodo 
 
    id accumsan sed, aliquet ac ante. Nam sagittis consequat consectetur. Nullam fringilla, nunc ac tempus fermentum, ante ipsum varius tortor, eget convallis libero metus vitae dolor. Phasellus tempor, turpis faucibus hendrerit ullamcorper, leo nibh 
 
    commodo metus, a interdum nunc metus quis mauris. Proin libero nisl, consequat sed venenatis at, vehicula eu neque. Nulla ac eleifend risus. Vestibulum rutrum faucibus massa nec vulputate. 
 
    </div> 
 

 
    <div class="b-block"> 
 
    <img src="http://i.imgur.com/kaXCm6C.png"> 
 
    </div> 
 
</div>

來源

2017-02-22 06:25:52 Sankar

謝謝，老實說，我看了看文檔，如何訂購的div，因爲我知道Flexbox的有這個功能，但我找不到它任何東西。非常感謝。 – iBrazilian2

隨時歡迎！ – Sankar

你需要添加一個CSS （彎曲方向：行反向;）扭轉div的位置。

修改後的代碼：

.text-container {width: 100%; display: flex; flex-direction: row-reverse;} 
 
.a-block { width: 50%; } 
 
.b-block { width: 50%; } 
 
.b-block img { width: 100%; }

<div class="text-container"> 
 
    <div class="a-block"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin maximus est eu nulla ullamcorper pulvinar. Vestibulum sem mi, tempor in metus vitae, iaculis volutpat purus. Donec at ex auctor, blandit mauris id, egestas ex. Aenean justo ipsum, commodo id accumsan sed, aliquet ac ante. Nam sagittis consequat consectetur. Nullam fringilla, nunc ac tempus fermentum, ante ipsum varius tortor, eget convallis libero metus vitae dolor. Phasellus tempor, turpis faucibus hendrerit ullamcorper, leo nibh commodo metus, a interdum nunc metus quis mauris. Proin libero nisl, consequat sed venenatis at, vehicula eu neque. Nulla ac eleifend risus. Vestibulum rutrum faucibus massa nec vulputate. 
 
    </div> 
 

 
    <div class="b-block"> 
 
    <img src="http://i.imgur.com/kaXCm6C.png"> 
 
    </div> 
 
</div>

來源

2017-02-22 06:30:42

如何將塊右移，並將塊b留給純CSS？

回答

相關問題