我无法更改CSS中div的宽度...？

问题描述：

我有一个问题http://www.totalpartsdepot.com/tuotteet.html
我刚添加断点的网站和我有问题
“@media只有屏幕和（最大宽度：768px）”

可能有人请去网站和检查源代码？
“明确：均;”以我想要的方式使产品独自处于“行”状态。

问题是我无法改变“.index-post”的宽度...我不明白我做错了什么，但它不会变得更宽... 我希望div能够成为该部分宽度的90％左右。它可能与div被标签包围并且在'li'标签内部有关系（我不知道为什么我会在那里放置这些“li”标签，但这是我第一个网站我做了一个星期，所以在半年前我不太了解）。我无法更改CSS中div的宽度...？

<!-- 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: [email protected]</h5> 

         <li><a href="210K012A.html"><div class="index-post"> 
        <img src="http://www.totalpartsdepot.com/kuvat/thumbnails/thumb-210K012.jpg" alt=""> 
        <h1>Sytytys&shy;järjestelmä 60W valo&shy;puolalla</h1> 
           <h2>Kierrosluku&shy;mittarin johdolla.</h2> 
           <h3>Puch ajoviima&shy;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; 
}

只是快速提示：

在小型设备指数后你不应该放弃的高度作出高度自动，如高度将根据内容调整
您的标记是错误的李不应该在没有UL

感谢您的回复！这是解决方案的一部分，我想通了。首先，标签，即div在里面，由于某种原因没有自动变宽......我在css中添加了以下内容：

section a { \t width：99％; \t最小高度：60vh; \t身高：自动！重要; \t display：block; \t溢出：隐藏; } –

我无法更改CSS中div的宽度...？

相关推荐