私のCSSブロックは解像度の異なるサイズで適応していないように見える

Question

画面の中央と高さと幅200pxのブロックを3 divにする必要があります。そして、異なる解像度で正しく表示されるはずです。 私のラップトップではよく見えますが、他の解像度でチェックしてみると、divも他の解像度下にあります。私の言語には申し訳ありません、ネイティブではありません。

<div class="koostooblock" style=" width:55%; margin:auto;"> 
     <div class="kt1" style="width:200px; height:200px; float:left; margin-right:1px; background:url(images/disaineritedele.png);"><p>Disaineritedele</p></div> 
     <div class="kt2" style="width:200px; height:200px; float:left; margin-right:1px; background:url(images/ehitajatedele.png);"><p>Ehitajatedele</p></div> 
     <div class="kt3" style="width:200px; height:200px; float:left; background:url(images/arhitekroritedele.png);"><p>Arhitekroritedele</p></div> 
</div> 

Answer 1

いくつかのこと、より良いプラクティスとしてCSSスタイルシートを使用しよう：

は、ここに私のコードです。

width: calc((100% - 2px)/3);を使用すると、各幅の幅が同じになるため、2pxは2pxの合計となるように1pxに2マージンが割り当てられているため、マージンです。携帯電話の画面サイズにメディアクエリを使用して更新

：

（注意：CSSコードの順序が重要で、あなたが一番上にメディアクエリを持っているので、もしそれが動作しません、ということを覚えておいてください）

/* mobile screen size */ 
@media (max-width: 768px) { 
    .kt1, .kt2, .kt3 { 
    width: calc(100% - 1px); 
    } 
} 

.kt1 { 
 
    width: calc((100% - 2px)/3); 
 
    height: 200px; 
 
    float: left; 
 
    margin-right: 1px; 
 
    background: url(images/disaineritedele.png); 
 
    background-color: yellow; 
 
} 
 

 
.kt2 { 
 
    width: calc((100% - 2px)/3); 
 
    height: 200px; 
 
    float: left; 
 
    margin-right: 1px; 
 
    background: url(images/ehitajatedele.png); 
 
    background-color: lightgreen; 
 
} 
 

 
.kt3 { 
 
    width: calc((100% - 2px)/3); 
 
    height: 200px; 
 
    float: left; 
 
    background: url(images/arhitekroritedele.png); 
 
    background-color: aqua; 
 
} 
 

 
.koostooblock { 
 
    width: 55%; 
 
    height: 100vh; 
 
    margin: auto; 
 
    background-color: lightgray; 
 
} 
 

 
/* mobile screen size */ 
 
@media (max-width: 768px) { 
 
    .kt1, .kt2, .kt3 { 
 
    width: calc(100% - 1px); 
 
    } 
 
}

<div class="koostooblock"> 
 
    <div class="kt1"> 
 
    <p>Disaineritedele</p> 
 
    </div> 
 
    <div class="kt2"> 
 
    <p>Ehitajatedele</p> 
 
    </div> 
 
    <div class="kt3"> 
 
    <p>Arhitekroritedele</p> 
 
    </div> 
 
</div>