Question

我遇到了http://www.totalpartsdepot.com/tuotteet.html的问题我刚刚在网站上添加了断点，而且我遇到了问题＆＃34; @media only screen and（max-width：768px）＆＃34;

有人可以去网站查看源代码吗？＆＃34;明确：两者;＆＃34;导致产品单独排在＆＃34;行＆＃34;，就像我想要的那样。

问题是，我无法改变＆＃34; .index-post＆＃34; ...我不明白我做错了什么，但它刚赢了＆＃39;变宽...... 我希望div成为该部分宽度的90％左右。它可以与被-tags包围的div和内部的＆＃34; li＆＃34; -tags（我不知道为什么我把这些＆＃34; li＆＃34; -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&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%;
    }
}

Answer 1

试试这个

将以下代码添加到第291行

.index-post {
list-style: none;
clear: both;
width: 90% !important; /*this*/
height: 70vw;
margin: 5% 1%;
padding: 1vh 1vw;
}

快速提示：

您不应该在小型设备中为高度自动索引制作高度，因为高度将根据内容进行调整
您的加价错误 li 不应在没有 ul 的情况下使用

我无法改变css中div的宽度......？

1 个答案: