我遇到了 http://www.totalpartsdepot.com/tuotteet.html 的问题
我刚刚在网站上添加了断点，但遇到了问题
“@media only screen and (max-width: 768px)”
有人可以去网站查看源代码吗？
“明确:两者；”使产品按照我想要的方式单独排成一排。
问题是我无法更改“.index-post”的宽度......我不明白我做错了什么，但它不会变宽......
我希望 div 成为该部分宽度的 90% 左右。
它是否与被 -tags 包围的 div 和位于“li”-tags 内的 div 有关(我不知道为什么我把那些“li”-tags 放在那里，但这是我制作的第一个网站我在一周内就完成了，所以当时我还不太了解，半年前)。
<!-- Simplified version of the website (http://www.totalpartsdepot.com/tuotteet.html) -->
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="utf-8"/>
<title>Tuotteet - Total Parts Depot</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="theme-color" content="#d4610e">
<link rel="stylesheet" href="style4.css" type="text/css">
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="wrapper">
<section>
<h4>Tuotteet</h4>
<h5>Kaikki hinnat sisältävät alv (24%)<br>
Tilaukset ja tiedustelut sähköpostitse: info@totalpartsdepot.com</h5>
<li><a href="210K012A.html"><div class="index-post">
<img src="http://www.totalpartsdepot.com/kuvat/thumbnails/thumb-210K012.jpg" alt="">
<h1>Sytytys­järjestelmä 60W valo­puolalla</h1>
<h2>Kierrosluku­mittarin johdolla.</h2>
<h3>Puch ajoviima­jäähdytteiset moottorit: Esim. <wbr>Tunturi Super Sport, <wbr>Trial <wbr>& Tiger S<br>
+ 2-vaihteiset Sachs-moottorit.</h3>
<h4>Tuotenumero: 210K012A</h4>
<h5>Hinta: 229€</h5>
</div></a></li>
<li><a href="inertialevy.html"><div class="index-post">
<img src="kuvat/thumbnails/thumb-inertialevy.jpg" alt="">
<h1>Inertialevy</h1>
<h2>Paino: 280 grammaa.</h2>
<h3>Yhteensopiva 210K... -sarjojen kanssa.</h3>
<h4>Tuotenumero: 210V257</h4>
<h5>Hinta: 33€</h5>
</div></a></li>
<li><a href="210V261.html"><div class="index-post">
<img src="kuvat/thumbnails/thumb-regulaattori.jpg" alt="">
<h1>Regulaattori 12V</h1>
<h2></h2>
<h3></h3>
<h4>Tuotenumero: 210V261</h4>
<h5>Hinta: 39€</h5>
</div></a></li>
</section>
</div>
</body>
</html>
body {
background-image: url(http://www.totalpartsdepot.com/kuvat/harjattualumiini.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #4a4a4a;
}
@font-face {
font-family: 'Streetwear';
src: url(http://www.totalpartsdepot.com/fontit/Streetwear.ttf);
}
@font-face {
font-family: 'StreetwearIE';
src: url(http://www.totalpartsdepot.com/fontit/Streetwear.eot);
}
#wrapper {
width: 98%;
min-height: 100%;
max-width: 920px;
background:#4a4a4a;
margin: auto;
padding: 5%;
text-decoration: none;
font-family: Streetwear, StreetwearIE, arial, sans-serif;
float: left;
}
section {
float: left;
padding: 2%;
background: #d4610e;
width: 90%;
margin: 5vh 2% 2vh 2%;
border: 4px solid #FFFFFF;
border-radius: 10px;
list-style: none;
}
section h4 {
float: top;
font-size: 30px;
color: #000000;
width:58vw;
margin-bottom: none;
}
section h5 {
margin-top: none;
color: #000000;
font-family: Arial, sans-serif;
font-weight: 800;
font-size: 20px;
margin-bottom: 2vh;
}
.index-post {
display: list-item;
list-style: none;
float: left;
width: 28%;
height: 40vw;
border: 1px solid #FFFFFF;
border-radius: 10px;
margin: 1%;
padding: 1vh 1vw;
background-image: url(http://www.totalpartsdepot.com/kuvat/harjattualumiini.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #4a4a4a;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 3px 1px rgba(0, 0, 0, 0.2);
}
.index-post:hover {
box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.4);
-webkit-filter: brightness(0.5);
filter: brightness(0.5);
}
.index-post img{
height: auto;
margin: 5%;
width: 90%;
display: block;
}
.index-post h1{
font-family: Arial, sans-serif;
font-size: 2vw;
font-weight: 900;
margin-bottom: 0.5vh;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
height: 15%;
width: 100%;
}
.index-post h2{
font-family: Arial, sans-serif;
font-size: 1.5vw;
font-weight: 500;
margin-bottom: 0.5vh;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
height: 5%;
width: 100%;
}
.index-post h3{
font-family: Arial, sans-serif;
font-size: 1.5vw;
font-weight: 500;
margin-bottom: 0.5vh;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
height: 20%;
width: 100%;
}
.index-post h4{
font-family: Arial, sans-serif;
font-size: 1.5vw;
font-weight: 500;
margin-bottom: 0.5vh;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
height: 5%;
width: 100%;
}
.index-post h5{
font-family: Arial, sans-serif;
font-size: 1.5vw;
font-weight: 500;
margin-bottom: 0.5vh;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
height: 5%;
width: 100%;
}
@media only screen and (max-width: 768px) {
section {
width: 90%;
margin: 2vh 5% 2vh 2%;
padding: 2%;
}
section h4 {
float: top;
font-size: 30px;
color: #000000;
width:58vw;
margin-bottom: none;
}
section h5 {
margin-top: none;
color: #000000;
font-family: Arial, sans-serif;
font-weight: 800;
font-size: 20px;
margin-bottom: 2vh;
}
section a {
width: 90%
margin: 2vh 5%;
display: block;
}
.index-post {
list-style: none;
clear: both;
width: 80%;
height: 70vw;
margin: 5% 1%;
padding: 1vh 1vw;
}
.index-post img{
height: auto;
margin: 0 5% 2% 0 5%;
width: 90%;
display: block;
}
.index-post h1{
font-family: Arial, sans-serif;
font-size: 25px;
font-weight: 900;
margin-bottom: 1%;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
height: 20%;
width: 100%;
}
.index-post h2{
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: 500;
margin-bottom: 1%;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
height: 10%;
width: 100%;
}
.index-post h3{
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: 500;
margin-bottom: 1%;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
height: 25%;
width: 100%;
}
.index-post h4{
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: 500;
margin-bottom: 1%;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
height: 10%;
width: 100%;
}
.index-post h5{
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: 500;
margin-bottom: 1%;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
height: 10%;
width: 100%;
}
}
最佳答案
试试这个
将以下代码添加到第 291 行
.index-post {
list-style: none;
clear: both;
width: 90% !important; /*this*/
height: 70vw;
margin: 5% 1%;
padding: 1vh 1vw;
}
简单提示:
你不应该在小设备上给 index-post make in height auto 设置高度，因为高度会根据内容调整
你的标记是错误的 li 不应该在没有 ul 的情况下使用
关于css - 我无法在 css 中更改 div 的宽度...？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43434877/