當我放大或縮小html佈局搞砸

我有一個問題，當我放大和縮小頁面的佈局會搞砸。我在網上搜索其他帖子，但沒有真正幫助。也許是因爲我安排我的CSS的方式。希望有人能向我解釋如何解決這個問題，謝謝。這是它之前和之後的樣子。當我放大或縮小html佈局搞砸

前

Before

後

After

HTML

<body> 
<div id="container"> 
    <div style="position:static"> 
     <ul class="items"> 
      <li>ABOUT KDU</li> 
      <li style="margin-left:30%;">ADMISSION</li>   
      <img src="kdulogo.png" class="MainImage" 
      style="position:static;"> 
      <li style="margin-left:60%;">CAMPUS LIFE</li> 
      <li style="margin-left:75%;">INTERNATIONAL STUDENT</li> 
     </ul> 
    </div> 


<div id="blocks"> 
    <ul id=" Images"> 
     <li><img src="SCCM.jpg" class="imageSize"></li> 
     <li><img src="SCCA.jpg" class="imageSize"></li> 
     <li><img src="SOB.jpg" class="imageSize"></li> 
     <li><img src="SHTCA.jpg" class="imageSize" style="margin- 
     left:210px;"></li>  
     <li><img src="SOE.jpg" class="imageSize"></li>  
    </ul>   
</div> 
</div> 
</body>

CSS

*{ 
    margin: 0; 
    padding: 0; 
    user-select: none; 
    font-family: "Futura PT Multilingual W02",Futura,Helvetica,Arial,sans- 
    serif; 
    font-weight: bold; 
    overflow-x: hidden; 
} 

body{ 
    background: #f5f5f0; 
} 


.MainImage{ 
    position: relative; 
    width: 10%; 
    margin: auto; 
    display: block; 
    transition: all .6s linear; 
} 

.items>li{ 
    color: black; 
    cursor: pointer; 
    margin-left: 150px; 
    position: absolute; 
    top: 100px; 
    display: inline; 
    text-decoration: none; 
    transition: all .2s linear; 
} 

.items>li:hover{ 
    text-decoration: underline; 
    text-decoration-color: black; 
    transition: all .2s linear; 
    transform: scale(1.5,1.5); 
} 

#blocks{ 
    background-color: #262626; 
    width: 100%; 
    height: 517; 
    position: static; 
    margin-top: 50px; 
} 

#blocks >ul>li{ 
    display:block; 
    float:left; 
    border: 20px; 
    margin-top: 30px; 
    margin-left: 80px; 
} 


#Images{ 
    position: absolute; 
    display: inline; 
} 

#Image>li{ 
    position: absolute; 
    display: block; 
} 

.imageSize{ 
    cursor: pointer; 
    width: 340px; 
    height: 200px; 
    transition: all .4s linear; 
} 

.imageSize:hover{ 
    opacity: 0.5; 
    transition: all .4s linear; 
} 


#container{ 
    width: 100%; 
    margin: 0 auto;

來源

2017-04-15 Dexter Siah

在SO上不允許詢問教程或其他參考。另外，SO是針對具體問題提出具體問題的。你的問題對於這個平臺來說太廣泛了。 – Rob

的原因，它的破碎類似的佈局，因爲你使用的百分比，所以當你改變，這意味着縮放級別的寬度正在被改變以適應正在發生的頁面的新大小。

改變你的CSS被固定到一定的程度將有助於解決這個問題，但不會完全解決，因爲它是如何目前正在一切。我建議作爲一個很好的起點，您將容器max-width更改爲適合設計的東西。

#container { 
    width: 100%; 
    max-width: 1280px; 
    margin: 0 auto; 
}

然而，您就可以使用media queries改變取決於屏幕尺寸將適當的頁面大小響應容器的寬度。例如，當平板電腦或手機的屏幕尺寸變小時，您可以這樣做（作爲示例）。

@media screen and (max-width: 1024px) { 

    #container { 
     max-width: 960px; 
    } 

}

來源

2017-04-15 10:21:09

我可以知道你的意思是什麼你的聲明「不會完全解決一切，因爲它是如何工作的」是我的方法實施的CSS和HTML是錯誤的或別的什麼？ –

我的意思是因爲你使用的是百分比，所以當你放大百分比時，屏幕就會放大。所以解決這個問題的方法是讓容器具有最大寬度並使用媒體查詢，以便元素在放大時響應屏幕大小。 –

我看到.....好吧我明白，非常感謝 –

我會建議使用w3schools您的所有網絡發展的需要。

您的內容造型打破了一切。

修復了一些CSS問題，但是您實施它的方式將使其無法進入響應級別。另外嘗試並保持你的HTML和CSS分開（不要做內聯CSS）。

HTML：

<div id="container"> 
<div style="position:static"> 
    <ul class="items"> 
     <li>ABOUT KDU</li> 
     <li>ADMISSION</li> 
     <img src="http://vignette2.wikia.nocookie.net/cso/images/7/79/Normal_regular_zombie_dummy.png/revision/latest?cb=20120104040300" class="MainImage"> 
     <li>CAMPUS LIFE</li> 
     <li>INTERNATIONAL STUDENT</li> 
    </ul> 
</div> 


<div id="blocks"> 
    <ul id=" Images"> 
     <li><img src="http://vignette2.wikia.nocookie.net/cso/images/7/79/Normal_regular_zombie_dummy.png/revision/latest?cb=20120104040300" class="imageSize"></li> 
     <li><img src="http://vignette2.wikia.nocookie.net/cso/images/7/79/Normal_regular_zombie_dummy.png/revision/latest?cb=20120104040300" class="imageSize"></li> 
     <li><img src="http://vignette2.wikia.nocookie.net/cso/images/7/79/Normal_regular_zombie_dummy.png/revision/latest?cb=20120104040300" class="imageSize"></li> 
     <li><img src="http://vignette2.wikia.nocookie.net/cso/images/7/79/Normal_regular_zombie_dummy.png/revision/latest?cb=20120104040300" class="imageSize"></li> 
     <li><img src="http://vignette2.wikia.nocookie.net/cso/images/7/79/Normal_regular_zombie_dummy.png/revision/latest?cb=20120104040300" class="imageSize"></li> 
    </ul> 
</div>

CSS：

*{ 
    margin: 0; 
    padding: 0; 
    user-select: none; 
    font-family: "Futura PT Multilingual W02",Futura,Helvetica,Arial,sans- 
    serif; 
    font-weight: bold; 
    overflow-x: hidden; 
} 

body{ 
    background: #f5f5f0; 
} 


.MainImage{ 
    width: 10%; 
    transition: all .6s linear; 
    float: left; 
} 

.items > li{ 
    color: black; 
    cursor: pointer; 
    text-decoration: none; 
    transition: all .2s linear; 
    float: left; 
    width: 22.5%; 
    text-align: center; 
    margin-top: 100px; 
} 


.items>li:hover{ 
    text-decoration-color: gray; 
    transition: all .2s linear; 
    transform: scale(1.2,1.2); 
} 

#blocks{ 
    background-color: #262626; 
    width: 100%; 
    min-height: 717px; 
    float: left; 
    clear: both; 
    margin-top: 20px; 
} 

#blocks >ul>li{ 
    display:block; 
    float:left; 
    border: 20px; 
    margin-top: 30px; 
    margin-left: 80px; 
} 


#Images{ 
    position: absolute; 
    display: inline; 
} 

#Image>li{ 
    position: absolute; 
    display: block; 
} 

.imageSize{ 
    cursor: pointer; 
    width: 340px; 
    height: 200px; 
    transition: all .4s linear; 
} 

.imageSize:hover{ 
    opacity: 0.5; 
    transition: all .4s linear; 
} 


#container{ 
    width: 100%; 
    margin: 0 auto; 
}

來源

2017-04-15 10:11:18

我可能知道你的聲明「你正在執行的方式將使它不可能下降到響應級別」這是否意味着我的css實現是完全錯誤的？如果我面臨的一個問題是，我很難理解如何使用這個位置：絕對的。 –

當我放大或縮小html佈局搞砸

回答

相關問題