最后一个浮动元素在响应视图中向下移动

Question

为什么在重新调整浏览器大小时，最后一个元素会向下移动？这是我的标记。它只是最后一个元素。

<div id="bct-items-container">
        <div class="bct-items">
            <img src="assets/images/jobs-icon.png" alt="Jobs"/>
           <h1>2,118</h1>
            <p>Open Jobs</p>
        </div>
        <div class="bct-items">
            <img src="assets/images/careers-head-blue.png" alt="Careers"/>
            <h1>10,300</h1>
            <p>Active Job Seekers</p>
        </div>
        <div class="bct-items">
            <img src="assets/images/employer-icon.png" alt="Employers"/>
            <h1>725</h1>
            <p>Prospective Employers</p>
        </div>
        <div class="bct-items">
            <img src="assets/images/handshake2.png" alt="Handshake"/>
            <h1>1,370</h1>
            <p>Positions Placed</p>
        </div>
    </div>
</div>

这是demo

Answer 1

因为边框和边距占据空间（以px为单位），div的宽度以百分比表示，当您以小宽度调整窗口大小时，边距和边框（以px为单位）对于那些百分比而言太大，因此内容宽度将为大于容器宽度，最后一个元素向下，你有很多可用空间，所以其他元素在自己的位置上持久存在。 当看到这个JSFiddle时你可以看到我说的话： jsfiddle.net/QupAV/42 /

在此示例中，所有边距和边框都为零，您可以调整窗口大小以查看所有元素是否存在于自己的位置。

如果您想轻松处理这些基本问题，我强烈建议您选择Bootstrap之类的内容。