[英]How to make 3 floating divs into 2 floating divs inside a flexbox?
我正在做一个电子商务网站。 在全屏视图中,并排显示 3 个产品,即 3 个产品图块,即 3 个 div。 下面是相关的 css 代码。
.single-product{
width: 33%;
float: left;
margin: 2px 64px;
background: white;
margin-bottom: 20px;
} /* For each individual product */
.products-section{
display:flex;
flex-direction: row;
justify-content: space-evenly;
padding-top: 20px;
} /* For the whole product section */
当我切换到移动视图时,相同的 3 个产品以较小的产品图块显示在屏幕上。 现在,当屏幕处于移动视图中时,我希望页面仅显示 2 个产品图块而不是 3 个。 我如何在 css 中做到这一点?
可以使用media
查询来完成:
body>div { background: #aaa; display: flex; flex-wrap: wrap; } body>div>div { flex-grow: 1; width: 33%; height: 100px; } body>div>div:nth-child(even) { background: lightgreen; } body>div>div:nth-child(odd) { background: lightpink; } @media screen and (max-width:600px) { body>div>div { flex-grow: 1; width: 50%; height: 100px; } }
<div > <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.