我的CSS塊看起來不適應與不同的分辨率大小

我需要使3 div塊的高度和寬度200px，並在屏幕的中心。它應該看起來不同的分辨率正確。我的筆記本電腦看起來不錯，但如果我檢查其他分辨率，那麼其他div也屬於其他分辨率。對不起，我的語言，不是本地的。我的CSS塊看起來不適應與不同的分辨率大小

這裏是我的代碼：

<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>

來源

2017-05-08 WEBSITE FREELANCE

你想這些div來響應？如果是這樣，你不能有固定寬度 –

爲什麼不使用寬度：33.33％這樣的事情。這裏是一個例子：http：//jsfiddle.net/webtiki/MpXYr/2/ – tech2017

通常固定寬度的元素不是很響應。在較小的視口上堆疊發生是因爲您的元素已浮動。當一行元素中沒有足夠空間存放元素時，最後一行將重新流向下一行。在你的情況下，只要視口的寬度小於600px，DIV就會從最後一個開始垂直堆疊。如果DIV **必須寬大於200px，你需要做出決定。如果是這樣，那麼你需要接受所有三個不能在較小的視口上在同一行。 – hungerstar

幾樣東西，嘗試使用CSS樣式表爲一個更好的做法。

使用width: calc((100% - 2px)/3);爲每個寬度獲得相等的寬度，2px爲邊距，因爲您有兩個頁邊距分配爲1px，因此2px總數。

爲手機屏幕大小更新使用媒體查詢：

（注：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>

來源

2017-05-08 19:52:17

@WEBSITE FREELANCE我使用媒體查詢更新 –

我的CSS塊看起來不適應與不同的分辨率大小

回答

爲手機屏幕大小更新使用媒體查詢：

（注：CSS代碼順序的問題，所以如果你在頂部有媒體查詢將無法正常工作，請記住）

相關問題