我写了一个在标准的unzoomed屏幕上看起来很好的网站。然而,当我放大时,div会聚集在一起并相互重叠。这是我的横幅区域的片段:
<div id="topBanner" class="topBanner"> <!-- This wraps up the banner area at the top -->
<div class="logoWrapper"> <!-- This helps keep the logo contained within it's area -->
<img id="logo" class="logo" src="img/square_altBlue_logo.gif" alt="Mr C Logo">
</div> <!-- end logo div -->
<div class="banner">
<div class="titlediv">
<h1 class="mrc name">MrC</h1>
</div> <!-- End Mr C area -->
<div class="titlediv numbers">
<h2 class="phone name">PH: 07 46 348 550</h2>
<h2 class="phone name">PH: 0401 398 800</h2>
</div>
</div> <!-- End namespace area -->
<div class="ccs name">
<h3>COMMERCIAL CLEANING SERVICE</h3>
</div>
</div> <!-- End banner area -->
这是另一个具有这些样式的包装器div
.wrapper {
min-width: 768px;
max-width: 1500px;
background-color: #2C4870;
margin: 0px auto;
margin-top: 10px;
margin-bottom: 20px;
}
the CSS for the banner area is here:
.logoWrapper {
width: 25%;
height: 100%;
float: left;
display: inline-block;
}
#logo {
height: 300px;
width: auto;
padding-left: 50px;
float: left;
}
.banner {
display: inline-block;
width: 75%;
color: white;
position: relative;
}
.titlediv {
float: left;
display: inline;
padding: 0;
}
.name {
font-family: 'Titillium Web', sans-serif;
color: white;
}
.mrc {
font-size: 130px;
vertical-align: text-top;
float: right;
margin: 0;
position: relative;
}
.phone {
margin: 0;
font-size: 60px;
margin-left: 20px;
}
.numbers {
position: absolute;
right: 150px;
}
.ccs {
margin: 0;
padding: 0;
font-size: 50px;
font-style: italic;
height: 100%;
vertical-align: top;
text-align: center;
position: absolute;
top: 135px;
right: 80px;
}
我在这里查看了论坛,但大多数帖子似乎是关于较低的分辨率或浏览器调整大小,并且这些方法都没有奏效。我需要修改它来进行缩放。