Question

我有3个div块，第一个在网页左侧较大，另一个在右侧较小。我希望他们的相对位置在任何缩放级别的浏览器中都是固定的。如果我现在放大，右栏中的两个div块会下降到第一个大div之下。

以下是代码的JFFIDDLE链接，请放大/缩小以查看问题。

<div id="topdiv">

    <div class="bigdiv">
        <p> big div </p>
    </div>  

    <div id="staticcal">
        <p> staticcal </p>
    </div>      
    <div id="staticnews">
        <p> staticnews </p>
    </div>

</div

#topdiv{
    display: inline-block;
    background-color:#b0c4de;
}

.bigdiv{
    margin: 10px 0;
    position: relative;
    width: 335px;
    height: 250px;
    float: left;
    border: 2px solid #c7930d;
}

#staticcal {
    width: 220px;
    height: 100px;
    line-height: 175px;
    float: right;
    display: inline-block;
    border: 2px solid #c7930d;
    border-radius: 4px;
    margin: 5px;
    margin-top: 10px;
    margin-right: 0px;
    position: relative;
}
#staticnews {
    width: 220px;
    height: 100px;
    line-height: 175px;
    float: right;
    display: inline-block;
    border: 2px solid #c7930d;
    border-radius: 4px;
    margin: 5px;
    margin-right: 0px;
    position: relative;
}

Answer 1

将min-width: 800px;添加到CSS文件中的#topdiv ID。

CSS：

#topdiv {
    display: inline-block;
    background-color:#b0c4de;
    min-width: 800px;
}

Answer 2

我注意到您在开发中使用border-radius，因此我更新了您的文件以考虑跨浏览器使用。这是一个更新的JSFiddle供您查看。此外，我通过添加staticcal and staticnews排列了float: left。以下是代码的缩小版：CLICK HERE

HTML：

<div id="topdiv">
    <div class="bigdiv">
        <p>big div</p>
    </div>
    <div id="staticcal">
        <p>staticcal</p>
    </div>
    <div id="staticnews">
        <p>staticnews</p>
    </div>
</div>

CSS：

#topdiv {
    display: inline-block;
    background-color:#b0c4de;
    min-width: 800px;
}
.bigdiv, #staticcal, #staticnews {
    position: relative;
    float: left;
    border: 2px solid #c7930D;
}
.bigdiv {
    margin: 10px 0;
    width: 335px;
    height: 250px;
}
#staticcal, #staticnews {
    display: inline-block;
    line-height: 175px;
    width: 220px;
    height: 100px;
    margin: 5px;
    margin-top: 10px;
    margin-right: 0px;
    -webkit-border-radius: 4px; /*This will address iOS 1 to 3.X, Android 1.6-2.1, Safari 3 - 4*/
    -moz-border-radius: 4px; /*Firefox 1 to 3.6*/
    border-radius: 4px; /*IE 9+, Opera 10.5, Chrome, Safari 5, FireFox 4+, iOS 4, Android 2.1+,
}
p {
    text-align: center;
}

缩放后修复div相对位置

2 个答案: