CSSのdivの幅を変更できません...？

私はちょうどウェブサイトにブレークポイントを追加し、私は
の問題を持っているhttp://www.totalpartsdepot.com/tuotteet.html
に問題が持っている：誰かに行くてもらえ

「のみ画面と@media（最大幅768pxに）」ウェブサイトとソースコードをチェック？
"clear：both;"私はそれを望む方法で、製品を「行」に単独で置くことになります。

".index-post"の幅を変更することができないという問題があります...私が間違っていたことは分かりませんが、それだけでは広がりはありません... 私は、divのセクションの幅の約90％になるようにしたいと思います。タグに囲まれているdivと何か関係がありますか？そして、 "li"タグ内にあるのですか？（なぜ私はそれらの "li"タグをそこに置くのか分かりませんが、それは私が今までの最初のウェブサイトでした私は1週間でそれをやったので、半年前のことはあまり知らなかった）。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%; 
    } 
}

出典

2017-04-16 Kalle Hiltunen

この

がライン291

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

だけの簡単なヒントに次のコードを追加してみてください。

は、高さは内容に応じて調整されますよう、高さ自動で行う
あなたのマークアップは、LiがUL

間違っています

出典

2017-04-17 06:15:19

返信いただきありがとうございます！それは解決策の一部であり、私はそれを理解しました。まず最初に、タグはdivが内部にあるという理由で何らかの理由で自動的に広がっていませんでした...私はCSSに以下を追加しました。

セクションa { \t幅：99％; \t最小高さ：60vh; \t身長：auto！important; \t display：ブロック; \tオーバーフロー：非表示。 } –

CSSのdivの幅を変更できません...？

答えて

関連する問題