html - 如何在 flexbox 中将 3 个浮动 div 变成 2 个浮动 div?
问题描述
我正在做一个电子商务网站。在全屏视图中,并排显示 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>
推荐阅读
- ruby - 红宝石:(0..)和(0...)之间的区别
- macos - SwiftUI 2 - 如何防止顶部部分在 macOS 和 iPadOS 的列表中关闭
- typescript - 如何转换或投射部分
到 T - docker - 命令 /bin/sh -c gradle run 返回一个非零代码:127
- php - 验证失败后返回上一页(Laravel)浏览器按钮
- python - Python groupby 将数据框变成一个奇怪的对象
- node.js - NodeJS - 使用 require 工程导入不起作用
- c# - 选项卡式 Windows 窗体 C#
- python-3.x - 如何发送角色名称?
- php - 我如何在后台 php 中运行 ffmpeg 命令