对于网页缩小之后盒子乱序

网页缩小盒子乱序问题

当我们在书写网页时可能会遇到全屏网页书写，写完之后缩小当前网页会导致网页排版不一致，出现乱序的问题，如下：
全屏时网页状态

缩小网页时网页状态

我们会发现此时网页中的第二行在全屏网页中时都还是正常状态而缩小网页之后就出现了问题

网页缩小盒子乱序问题解决

下面是盒子乱序时的代码片，css代码未给出，这里我们可以发现第二行网页实际上是被我们分成了三个部分，第一个部分是background盒子，第二个部分是second盒子，第三个部分是search盒子，他们分别在自己的位置上排列着。

<div class="background">
        <a href="xiaomi.html"><img src="imges/mi-logo.png"></a>
    </div>
    <div class="second">
        <div class="head">
            <div class="head_small"><span>小米手机</span></div>
            <div class="head_small"><span>Redmi红米</span></div>
            <div class="head_small"><span>电视</span></div>
            <div class="head_small"><span>笔记本</span></div>
            <div class="head_small"><span>家电</span></div>
            <div class="head_small"><span>路由器</span></div>
            <div class="head_small"><span>智能硬件</span></div>
            <div class="head_small"><span>服务</span></div>
            <div class="head_small"><span>社区</span></div>
        </div>
    </div>
    <div class="search">
        <div class="search_left">
            <input type="text" value="电视" style="line-height: 50px;">
        </div>
        <div class="search_right">
            <input type="submit" value="搜索">
        </div>
    </div>

而网页端出现这个问题的原因就是因为三个盒子之间没有任何联系，相互独立，所以在网页缩小之后就会乱序，而此时我们只需要在代码的最外面加上一个大盒子把三个小盒子装在一起就好了，代码如下：

<div style=" display: block; width: 1500px;height: 150px;">
        <div class="background">
            <a href="xiaomi.html"><img src="imges/mi-logo.png"></a>
        </div>
        <div class="second">
            <div class="head">
                <div class="head_small"><span>小米手机</span></div>
                <div class="head_small"><span>Redmi红米</span></div>
                <div class="head_small"><span>电视</span></div>
                <div class="head_small"><span>笔记本</span></div>
                <div class="head_small"><span>家电</span></div>
                <div class="head_small"><span>路由器</span></div>
                <div class="head_small"><span>智能硬件</span></div>
                <div class="head_small"><span>服务</span></div>
                <div class="head_small"><span>社区</span></div>
            </div>
        </div>
        <div class="search">
            <div class="search_left">
                <input type="text" value="电视" style="line-height: 50px;">
            </div>
            <div class="search_right">
                <input type="submit" value="搜索">
            </div>
        </div>
    </div>

更改之后网页缩小对比

特别说明

我们在定义大盒子时需要定义长宽，必须要把所有盒子全部装在里面，对于盒子长宽的定义是非常重要的