如何将块右移，并将块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？

回答

相关问题