当放大时,div会聚拢

时间:2015-12-11 12:11:10

标签: html css

我写了一个在标准的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;
}

我在这里查看了论坛,但大多数帖子似乎是关于较低的分辨率或浏览器调整大小,并且这些方法都没有奏效。我需要修改它来进行缩放。

0 个答案:

没有答案