0

我有 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;
}
4

2 回答 2

3

添加min-width: 800px;到#topdivCSS 文件中的 id。

CSS：

#topdiv {
    display: inline-block;
    background-color:#b0c4de;
    min-width: 800px;
}
于 2013-10-22T03:21:37.590 回答
1

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

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;
}
于 2013-10-22T03:34:09.650 回答