我有3个项目显示在大屏幕上一样:
_____________
| 1 | 3 |
|____| |
| 2 |______|
|____|
第1项和第2项需要刚好在彼此的下面,第3项在右侧,不要留下任何空间。
在小屏幕上,它应该如下所示:
______
| 1 |
|____|
| 3 |
|____|
| 2 |
|____|
代码:
<div class="container">
<div class="row">
<div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat suscipit, voluptate exercitationem, soluta officia nesciunt dolorem illum enim vel ut natus, magni debitis doloribus nulla autem aspernatur nihil commodi voluptas.</div>
<div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam optio, fugit. Quam aut blanditiis, placeat veniam saepe, aliquam nam ipsa nostrum vitae deleniti dolor porro, praesentium natus maxime nulla harum.</div>
<div class="col-lg-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium amet nisi vitae, accusantium commodi debitis quae exercitationem odio rem ut dolores quibusdam nostrum recusandae, quis, minima ad dignissimos mollitia.</div>
</div>
</div>
演示:
https://jsfiddle.net/pf0j1ehz/
它可以用柔性属性来完成吗?
1条答案
按热度按时间ilmyapht1#
我所要做的是将你的前两个div Package 到一个容器中,然后将你的第三组 Package 到另一个容器中,然后将每个容器的宽度设置为50%,这样就可以保持你想要的例子中的宽度。
看看我在这里做了什么:
编辑,因为OP改变了他的问题,这里是修改后的答案。你可以使用网格沿着
grid-template-areas
来做这件事,并使用媒体查询来改变grid-template-areas
以适应更小的屏幕。请参见此处:
一个二个一个一个