调整大小时css浮动元素位置崩溃

Question

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

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

div真是空白。

CSS

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

Answer 1

我刚刚意识到，你没有浮动其他元素，这导致它向下移动，你应该使用float: left;或right，因为它是div所以它需要整个水平空间，因此它被推下来。

Demo

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

---

<强>替代

您应该使用display: inline-block;和white-space: nowrap;来阻止元素的包装

Demo

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

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

以上将为您解决空白问题

Demo 2

Answer 2

添加此CSS。 Demo

.two {
    margin-left: 300px;
}

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

Answer 3

给你的身体最小宽度：

body {
    min-width: 1110px;
}

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

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