显示：弹性；不适用于小于 480 像素至 320 像素的屏幕尺寸
display: flex; not working in less than 480 pixel to 320 pixel of screen size
任何人都可以帮助我，我有一段时间被困在这个问题上了。当我将屏幕尺寸宽度设置在 320 到 480 像素之间时，我的产品显示卡没有处于弯曲位置。
希望任何 css 专家能帮助我。我还通过@media screen 做了一些不同尺寸的屏幕。
但请查看此编码超过 480 像素的宽度，以了解我想要制作的内容:)
我在下面粘贴了 html 和 css 代码。
所有图片都在 github 但 css 在 github respo 中是 1 或 2 行旧的。
https://github.com/daksh100sharma/new-daddy-s-games-
如果您看不到代码或图片，请按我删除的许可下的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<title>Home</title>
<link rel="icon" href="favicon.jpg">
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script>
// $(window).resize(function(){location.reload();});
//refresh page on browser resize
$(window).bind('resize', function(e)
{
console.log('window resized..');
this.location.reload(false); /* false to get page from cache */
/* true to fetch page from server */
});
</script>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">NEW DADDY'S GAMES</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Accessories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="graphics-card.html">Graphics card</a>
</li>
</ul>
<span class="navbar-text">
<!-- Navbar text with an inline element -->
</span>
</div>
</div>
</nav>
<div class="show-case">
<div class="show-case-1st-line">
<div class="graphics-card" >
<h1>Graphics card</h1>
<img class="img001" src="001.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="gaming-mouse" >
<h1>GAMING MOUSE</h1>
<img class="img002" src="002.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="gaming-headphone" >
<h1>GAMING HEADPHONES</h1>
<img class="img003" src="003.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
</div>
<div class="show-case-2nd-line">
<div class="gaming-chair">
<h1>COMFY CHAIR</h1>
<img class="img005" src="005.jpg" image>
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="fps-monitor">
<h1>FPS MONITOR</h1>
<img class="img006" src="006.jpg" image>
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="ram" >
<h1>RAM</h1>
<img class="img004" src="004.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
</div>
</div>
<br>
<div class="game-display">
<img class="img007" src="resorce/home-minecraft.jpg" type="image">
<button class="img007-btn"><a href="https://google.com">Buy now</a></button>
</div>
<br>
<hr>
<div class="about-us">
<h1>About Us</h1>
<p>We are a new computer accessories store.<br>
We would love to have great customers like you</p>
</div>
</body>
</html>
这是我的 css 但请不要忘记我还写了@media screen for device width of 320 to max device width to 480px
*{
padding: 0;
margin: 0;
}
body{
background-color: #732673;
/* background-image: linear-gradient(to right,#ffffe6 ,#ffe6ff); */
}
hr{
color: white;
margin: auto;
}
.show-case{
text-align: center;
margin: auto ;
display: block;
}
.show-case-1st-line{
display: flex;
text-align: center;
margin-top: 10px;
margin: auto;
}
.graphics-card{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.graphics-card h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img001{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
.graphics-card-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.graphics-card-btn a{
text-decoration: none;
}
/* ///////// SHOW-CASE [GAMING MOUSE] ///////// */
.gaming-mouse{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin: auto;
margin: 0;
margin-top: 10px;
}
.gaming-mouse h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img002{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
/* .gaming-mouse-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
} */
.gaming-mouse-btn a{
text-decoration: none;
}
.gaming-headphone{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.gaming-headphone h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img003{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
/* .gaming-headphone-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
} */
/* gaming-headphone-btn a{
text-decoration: none;
} */
.ram{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.ram h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img004{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
/* .ram-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.ram-btn a{
text-decoration: none;
} */
.show-case-2nd-line{
display: flex;
text-align: center;
margin-top: 10px;
margin: auto;
}
.gaming-chair{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.gaming-chair h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img005{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
.gaming-chair-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.gaming-chair-btn a{
text-decoration: none;
}
.fps-monitor{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.fps-monitor h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img006{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
/* .fps-monitor-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.fps-monitor-btn a{
text-decoration: none;
} */
.game-display img{
max-width: 90%;
display: flex;
margin: auto;
}
.img007{
border-radius: 13px;
}
.img007-btn{
margin: auto;
display: block;
margin-top: 10px;
background-color: green;
}
.img007-btn a{
color: white;
text-decoration: none;
padding: 7px;
}
.about-us{
position:relative;
margin:auto;
border-radius: 13px;
max-width: 80%;
height: auto;
text-align: center;
font-size: 3px;
color:aqua;
position:static;
}
.about-us h1{
font-size: 28px;
text-decoration: underline;
text-decoration-color: black;
}
.about-us p{
color:#ff80b3;
font-size: 17px;
}
/* Smartphones (portrait and landscape) 320 - 480 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
.show-case{
display: block;
padding:0;
}
/* .show-case-1st-line{
} */
.show-case-2nd-line{
display: flex;
margin: 0%;
}
.graphics-card{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.gaming-mouse{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.gaming-headphone{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.ram{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.ram h1{
padding: 12px;
position: relative;
}
.gaming-chair{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.fps-monitor{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.fps-monitor h1{
padding: 1px;
position: relative;
}
.show-case-2nd-line{
display:flex;
display: block;
margin-bottom: 10px;
padding:0;
}
}
/* Small phone 245 283 */
@media only screen and (min-device-width : 245px) and (max-device-width : 229px){
.show-case{
max-width: 70%;
display:flex;
margin: 10px;
}
.show-case-2nd-line{
max-width: 70%;
display:flex;
margin: 10px;
}
.graphics-card{
margin-bottom: 10px;
}
.gaming-mouse{
margin-bottom: 10px;
}
.gaming-headphone{
margin-bottom: 10px;
}
.ram{
margin-bottom: 10px;
}
.gaming-chair{
margin-bottom: 10px;
}
.fps-monitor{
margin-bottom: 10px;
}
}
您在同一个地方使用 display:flex 和 display:block。为此，问题正在发生。请从 --->>".show-case-2nd-line" 这个 class 中移除 display: 块。这是截图，你可以检查一下。
Plese check the screenshot
只是一个额外的观点：为什么不以更聪明的方式直接使用 flex 的力量？
使用我在下面留下的解决方案，您将有两大优势：
- 您可以 add/remove 类别，而无需每 3 个附加项目创建 类 作为
show-case-1st-line。当然，这将使您的代码在长期 运行 上更易于维护
- 使用你当前的解决方案[即使当前标记为答案的更正]当你的屏幕宽度下降到大约 380 像素以下时，每行的元素不再对齐，并且在你的特定情况下，行具有不同的宽度，即，宽度为 300px
时会发生这种情况
我的代码背后的一些假设：
- 我假设您最多需要在同一行显示 3 个类别[来自您的原始解决方案]
- 我假设当宽度减小到
320px 以下时，最好每行一个项目 [以改善用户体验]
- 我假设在大屏幕的情况下，您不想拉伸每行的最大元素数 [3 因为我在第一次炒作中说的] 以保持高质量的图片，所以如果屏幕是大于
750px 的元素将停止拉伸
事不宜迟，这是JSFiddle
// $(window).resize(function(){location.reload();});
//refresh page on browser resize
$(window).bind('resize', function(e)
{
console.log('window resized..');
this.location.reload(false); /* false to get page from cache */
/* true to fetch page from server */
});
*{
padding: 0;
margin: 0;
}
body{
background-color: #732673;
/* background-image: linear-gradient(to right,#ffffe6 ,#ffe6ff); */
}
hr{
color: white;
margin: auto;
}
#show-case{
display: flex;
flex-wrap: wrap;
margin: auto ;
text-align: center;
max-width: 750px;
}
.graphics-card{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
text-align: center;
margin-top: 10px;
}
.graphics-card h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img001{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
.graphics-card-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.graphics-card-btn a{
text-decoration: none;
}
/* ///////// SHOW-CASE [GAMING MOUSE] ///////// */
.gaming-mouse{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px;
padding: 10px;
margin-top: 10px;
}
.gaming-mouse h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img002{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
/* .gaming-mouse-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
} */
.gaming-mouse-btn a{
text-decoration: none;
}
.gaming-headphone{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
margin-top: 10px;
}
.gaming-headphone h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img003{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
/* .gaming-headphone-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
} */
/* gaming-headphone-btn a{
text-decoration: none;
} */
.gaming-chair{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
margin-top: 10px;
}
.gaming-chair h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img005{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
.gaming-chair-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.gaming-chair-btn a{
text-decoration: none;
}
.fps-monitor{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
margin-top: 10px;
}
.fps-monitor h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img006{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
/* .fps-monitor-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.fps-monitor-btn a{
text-decoration: none;
} */
.ram{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
margin-top: 10px;
}
.ram h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img004{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
/* .ram-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.ram-btn a{
text-decoration: none;
} */
.about-us{
position:relative;
margin:auto;
border-radius: 13px;
max-width: 80%;
height: auto;
font-size: 3px;
color:aqua;
position:static;
}
.about-us h1{
font-size: 28px;
text-decoration: underline;
text-decoration-color: black;
}
.about-us p{
color:#ff80b3;
font-size: 17px;
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 320px) {
.graphics-card, .gaming-mouse, .gaming-headphone, .gaming-chair, .fps-monitor, .ram
{
flex: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<title>Home</title>
<link rel="icon" href="favicon.jpg">
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script>
</script>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">NEW DADDY'S GAMES</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Accessories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="graphics-card.html">Graphics card</a>
</li>
</ul>
<span class="navbar-text">
<!-- Navbar text with an inline element -->
</span>
</div>
</div>
</nav>
<div id="show-case">
<div class="graphics-card" >
<h1>Graphics card</h1>
<img class="img001" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/001.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="gaming-mouse" >
<h1>GAMING MOUSE</h1>
<img class="img002" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/002.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="gaming-headphone" >
<h1>GAMING HEADPHONES</h1>
<img class="img003" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/003.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="gaming-chair">
<h1>COMFY CHAIR</h1>
<img class="img005" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/005.jpg" image>
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="fps-monitor">
<h1>FPS MONITOR</h1>
<img class="img006" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/006.jpg" image>
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="ram" >
<h1>RAM</h1>
<img class="img004" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/004.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
</div>
<hr>
<div class="about-us">
<h1>About Us</h1>
<p>We are a new computer accessories store.<br>
We would love to have great customers like you</p>
</div>
</body>
</html>
</body>
</html>
以下屏幕截图分别显示了 480px、420px、240px
处的布局改进
祝你有美好的一天，
安东尼奥
任何人都可以帮助我，我有一段时间被困在这个问题上了。当我将屏幕尺寸宽度设置在 320 到 480 像素之间时，我的产品显示卡没有处于弯曲位置。 希望任何 css 专家能帮助我。我还通过@media screen 做了一些不同尺寸的屏幕。 但请查看此编码超过 480 像素的宽度，以了解我想要制作的内容:) 我在下面粘贴了 html 和 css 代码。
所有图片都在 github 但 css 在 github respo 中是 1 或 2 行旧的。 https://github.com/daksh100sharma/new-daddy-s-games- 如果您看不到代码或图片，请按我删除的许可下的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<title>Home</title>
<link rel="icon" href="favicon.jpg">
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script>
// $(window).resize(function(){location.reload();});
//refresh page on browser resize
$(window).bind('resize', function(e)
{
console.log('window resized..');
this.location.reload(false); /* false to get page from cache */
/* true to fetch page from server */
});
</script>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">NEW DADDY'S GAMES</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Accessories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="graphics-card.html">Graphics card</a>
</li>
</ul>
<span class="navbar-text">
<!-- Navbar text with an inline element -->
</span>
</div>
</div>
</nav>
<div class="show-case">
<div class="show-case-1st-line">
<div class="graphics-card" >
<h1>Graphics card</h1>
<img class="img001" src="001.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="gaming-mouse" >
<h1>GAMING MOUSE</h1>
<img class="img002" src="002.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="gaming-headphone" >
<h1>GAMING HEADPHONES</h1>
<img class="img003" src="003.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
</div>
<div class="show-case-2nd-line">
<div class="gaming-chair">
<h1>COMFY CHAIR</h1>
<img class="img005" src="005.jpg" image>
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="fps-monitor">
<h1>FPS MONITOR</h1>
<img class="img006" src="006.jpg" image>
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="ram" >
<h1>RAM</h1>
<img class="img004" src="004.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
</div>
</div>
<br>
<div class="game-display">
<img class="img007" src="resorce/home-minecraft.jpg" type="image">
<button class="img007-btn"><a href="https://google.com">Buy now</a></button>
</div>
<br>
<hr>
<div class="about-us">
<h1>About Us</h1>
<p>We are a new computer accessories store.<br>
We would love to have great customers like you</p>
</div>
</body>
</html>
这是我的 css 但请不要忘记我还写了@media screen for device width of 320 to max device width to 480px
*{
padding: 0;
margin: 0;
}
body{
background-color: #732673;
/* background-image: linear-gradient(to right,#ffffe6 ,#ffe6ff); */
}
hr{
color: white;
margin: auto;
}
.show-case{
text-align: center;
margin: auto ;
display: block;
}
.show-case-1st-line{
display: flex;
text-align: center;
margin-top: 10px;
margin: auto;
}
.graphics-card{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.graphics-card h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img001{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
.graphics-card-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.graphics-card-btn a{
text-decoration: none;
}
/* ///////// SHOW-CASE [GAMING MOUSE] ///////// */
.gaming-mouse{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin: auto;
margin: 0;
margin-top: 10px;
}
.gaming-mouse h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img002{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
/* .gaming-mouse-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
} */
.gaming-mouse-btn a{
text-decoration: none;
}
.gaming-headphone{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.gaming-headphone h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img003{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
/* .gaming-headphone-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
} */
/* gaming-headphone-btn a{
text-decoration: none;
} */
.ram{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.ram h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img004{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
/* .ram-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.ram-btn a{
text-decoration: none;
} */
.show-case-2nd-line{
display: flex;
text-align: center;
margin-top: 10px;
margin: auto;
}
.gaming-chair{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.gaming-chair h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img005{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
.gaming-chair-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.gaming-chair-btn a{
text-decoration: none;
}
.fps-monitor{
width: 250px;
height: auto;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 0;
padding: 10px;
text-align: center;
display: block;
margin-top: 10px;
}
.fps-monitor h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img006{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
/* .fps-monitor-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.fps-monitor-btn a{
text-decoration: none;
} */
.game-display img{
max-width: 90%;
display: flex;
margin: auto;
}
.img007{
border-radius: 13px;
}
.img007-btn{
margin: auto;
display: block;
margin-top: 10px;
background-color: green;
}
.img007-btn a{
color: white;
text-decoration: none;
padding: 7px;
}
.about-us{
position:relative;
margin:auto;
border-radius: 13px;
max-width: 80%;
height: auto;
text-align: center;
font-size: 3px;
color:aqua;
position:static;
}
.about-us h1{
font-size: 28px;
text-decoration: underline;
text-decoration-color: black;
}
.about-us p{
color:#ff80b3;
font-size: 17px;
}
/* Smartphones (portrait and landscape) 320 - 480 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
.show-case{
display: block;
padding:0;
}
/* .show-case-1st-line{
} */
.show-case-2nd-line{
display: flex;
margin: 0%;
}
.graphics-card{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.gaming-mouse{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.gaming-headphone{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.ram{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.ram h1{
padding: 12px;
position: relative;
}
.gaming-chair{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.fps-monitor{
margin: auto;
margin-bottom: 10px;
max-width: 40%;
}
.fps-monitor h1{
padding: 1px;
position: relative;
}
.show-case-2nd-line{
display:flex;
display: block;
margin-bottom: 10px;
padding:0;
}
}
/* Small phone 245 283 */
@media only screen and (min-device-width : 245px) and (max-device-width : 229px){
.show-case{
max-width: 70%;
display:flex;
margin: 10px;
}
.show-case-2nd-line{
max-width: 70%;
display:flex;
margin: 10px;
}
.graphics-card{
margin-bottom: 10px;
}
.gaming-mouse{
margin-bottom: 10px;
}
.gaming-headphone{
margin-bottom: 10px;
}
.ram{
margin-bottom: 10px;
}
.gaming-chair{
margin-bottom: 10px;
}
.fps-monitor{
margin-bottom: 10px;
}
}
您在同一个地方使用 display:flex 和 display:block。为此，问题正在发生。请从 --->>".show-case-2nd-line" 这个 class 中移除 display: 块。这是截图，你可以检查一下。 Plese check the screenshot
只是一个额外的观点：为什么不以更聪明的方式直接使用 flex 的力量？
使用我在下面留下的解决方案，您将有两大优势：
- 您可以 add/remove 类别，而无需每 3 个附加项目创建 类 作为
show-case-1st-line。当然，这将使您的代码在长期 运行 上更易于维护
- 使用你当前的解决方案[即使当前标记为答案的更正]当你的屏幕宽度下降到大约 380 像素以下时，每行的元素不再对齐，并且在你的特定情况下，行具有不同的宽度，即，宽度为 300px 时会发生这种情况
我的代码背后的一些假设：
- 我假设您最多需要在同一行显示 3 个类别[来自您的原始解决方案]
- 我假设当宽度减小到
320px以下时，最好每行一个项目 [以改善用户体验] - 我假设在大屏幕的情况下，您不想拉伸每行的最大元素数 [3 因为我在第一次炒作中说的] 以保持高质量的图片，所以如果屏幕是大于
750px的元素将停止拉伸
事不宜迟，这是JSFiddle
// $(window).resize(function(){location.reload();});
//refresh page on browser resize
$(window).bind('resize', function(e)
{
console.log('window resized..');
this.location.reload(false); /* false to get page from cache */
/* true to fetch page from server */
});
*{
padding: 0;
margin: 0;
}
body{
background-color: #732673;
/* background-image: linear-gradient(to right,#ffffe6 ,#ffe6ff); */
}
hr{
color: white;
margin: auto;
}
#show-case{
display: flex;
flex-wrap: wrap;
margin: auto ;
text-align: center;
max-width: 750px;
}
.graphics-card{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
text-align: center;
margin-top: 10px;
}
.graphics-card h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img001{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
.graphics-card-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.graphics-card-btn a{
text-decoration: none;
}
/* ///////// SHOW-CASE [GAMING MOUSE] ///////// */
.gaming-mouse{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px;
padding: 10px;
margin-top: 10px;
}
.gaming-mouse h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img002{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
/* .gaming-mouse-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
} */
.gaming-mouse-btn a{
text-decoration: none;
}
.gaming-headphone{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
margin-top: 10px;
}
.gaming-headphone h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img003{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
/* .gaming-headphone-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
} */
/* gaming-headphone-btn a{
text-decoration: none;
} */
.gaming-chair{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
margin-top: 10px;
}
.gaming-chair h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img005{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
display: flex;
border: 2px #67b581 solid;
}
.gaming-chair-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.gaming-chair-btn a{
text-decoration: none;
}
.fps-monitor{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
margin-top: 10px;
}
.fps-monitor h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img006{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
/* .fps-monitor-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.fps-monitor-btn a{
text-decoration: none;
} */
.ram{
width: 250px;
height: auto;
flex: 33.3%;
background-color: #bb99ff;
border-radius: 12px;
border: 3px ;
padding: 10px;
margin-top: 10px;
}
.ram h1{
color: white;
text-transform: uppercase;
font-size: 20px;
}
.img004{
max-width: 95%;
min-width: 95%;
height: 110px;
margin: auto;
border-radius: 12px;
border: 2px #67b581 solid;
}
/* .ram-btn{
padding: 5px;
margin-top: 16px;
background-color: black;
color: white;
}
.ram-btn a{
text-decoration: none;
} */
.about-us{
position:relative;
margin:auto;
border-radius: 13px;
max-width: 80%;
height: auto;
font-size: 3px;
color:aqua;
position:static;
}
.about-us h1{
font-size: 28px;
text-decoration: underline;
text-decoration-color: black;
}
.about-us p{
color:#ff80b3;
font-size: 17px;
}
/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 320px) {
.graphics-card, .gaming-mouse, .gaming-headphone, .gaming-chair, .fps-monitor, .ram
{
flex: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
<title>Home</title>
<link rel="icon" href="favicon.jpg">
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script>
</script>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">NEW DADDY'S GAMES</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Accessories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="graphics-card.html">Graphics card</a>
</li>
</ul>
<span class="navbar-text">
<!-- Navbar text with an inline element -->
</span>
</div>
</div>
</nav>
<div id="show-case">
<div class="graphics-card" >
<h1>Graphics card</h1>
<img class="img001" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/001.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="gaming-mouse" >
<h1>GAMING MOUSE</h1>
<img class="img002" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/002.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="gaming-headphone" >
<h1>GAMING HEADPHONES</h1>
<img class="img003" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/003.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="gaming-chair">
<h1>COMFY CHAIR</h1>
<img class="img005" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/005.jpg" image>
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="fps-monitor">
<h1>FPS MONITOR</h1>
<img class="img006" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/006.jpg" image>
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
<div class="ram" >
<h1>RAM</h1>
<img class="img004" src="https://raw.githubusercontent.com/daksh100sharma/new-daddy-s-games-/main/004.jpg" type="image">
<button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
</div>
</div>
<hr>
<div class="about-us">
<h1>About Us</h1>
<p>We are a new computer accessories store.<br>
We would love to have great customers like you</p>
</div>
</body>
</html>
</body>
</html>
以下屏幕截图分别显示了 480px、420px、240px
祝你有美好的一天，
安东尼奥