html - 两个div的位置

Question

我的网页中有两个 div 元素，并且我已经包含了这两个元素的 CSS。

#item-browsing {
    width: 65%;
    height: 500px;
    float: left;
    position: relative;
    min-width: 915px;
}

#bill-information {
    width: 315px;
    height: 100%;
    float: left;
    box-shadow: 3px -3px 11px -7px;
}

当我为各种分辨率重新调整浏览器的大小时，项目浏览元素会下降。我附上了我上面的意思的屏幕截图。

如何使用 CSS 解决此问题。

谢谢你。

Answer 1

给出这两个元素的父元素position: relative并更改以下与#item-browsing.

#item-browsing {
    height: 500px;
    position: absolute;
    right: 315px; /* or left */
    left: 0;
    top: 0;
    bottom: 0;
    min-width: 915px;
}

顺便说一句，SO上有很多基于这个问题的帖子。

工作小提琴

Answer 2

只需在这两个 div 周围放置一个包装器。像这样：

#wrapper{
width: [your width];
clear: both;
padding: 0;
overflow: hidden;
}

#item-browsing {
    width: 65%;
    height: 500px;
    float: left;
    position: relative;
    min-width: 915px;
}

#bill-information {
    width: 315px;
    height: 100%;
    float: left;
    box-shadow: 3px -3px 11px -7px;
}

Answer 3

添加一个包装器并将其设置min-width为两个包含 div 的宽度之和：

#wrapper {
    min-width: 1230px;
}

简化演示

Answer 4

如果浏览器宽度小于 915 (min-width)+315(width)=1230px，则第二个 div 右侧没有空间。