两个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相关的以下css。

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

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

Working Fiddle

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;
}

Simplified demo

Answer 4

如果浏览器宽度小于915（最小宽度）+315（宽度）= 1230px，则第二个div在右侧没有空格。