css - 调整大小时css浮动元素位置折叠

Question

每当我调整浏览器的大小时，.container 中的第二个 div 位于第一个下方。

<div class = "container">
     <div class = "one"></div>
     <div class = "two"></div>
</div>

divs真的是空白的。

CSS

.container{
    overflow: hidden;
    width: 810px;
    min-width: 810px;
}
.one,.two{
    width: 300px;
    height: 450px;
}
.one{float:left}

score 3 · Accepted Answer

我刚刚意识到，你没有浮动另一个元素，这导致它向下移动，你应该使用float: left;orright因为div它会占用整个水平空间，因此它被向下推。

.one, .two{
    width: 300px;
    height: 450px;
    float:left; /* Float both elements */
    background: #f00;
}

选择

您应该使用display: inline-block;andwhite-space: nowrap;来防止元素的换行

这会给你同样的效果，唯一的就是4px空白，你可以简单地使用

.two {
   margin-left: -4px;
}

以上将为您解决空白问题

score 0 · Accepted Answer

给你的身体一个最小宽度：

body {
    min-width: 1110px;
}

然后，当视口小于 1110px 时，滚动条就会出现。

注意：如果你为 div 添加边距、内边距或边框，请将其添加到正文的最小宽度（或占用一些额外空间）。

score 0 · Accepted Answer

添加这个 CSS。演示。

.two {
    margin-left: 300px;
}

PS：当使用 float 时，你应该clearfix。

3 回答 3