当我放大或缩小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布局搞砸

回答

相关问题