本来还很好看

一旦缩放窗口，就成了这样

恶心吐了要。

经过查找，给div添加下面css可解决，意思是强制在同一行展示，窗口缩放之后也是一样。

div {

    white-space: nowrap;

} 

这样子就顺眼多了

 但是这样又有了一个麻烦，原本两行的内容，现在只能在一行展示，势必会挤压其他div的空间，导致图片又变小了。

我们又只能通过<br>强制换行了，如果只能通过强制换行而不是自动换行多多少少肯定还是有问题的。

还有一个办法在其父元素加上以下样式，这样就不会因为 white-space：nowrap而影响布局。

但是缺点也显而易见的，字体已经越界了。

{

        min-width : 0

}

---

推荐两个比较完美的解决办法

1.在最外层添加一个div，指定长度和宽度，注意不能使用百分比，只能用确定的长度。改变窗口大小也不会改变css样式，只是看不见了而已。

 

 给的宽度可以稍微大一点。但是要注意里面的内容布局，设置的宽度大于屏幕的话，内容是可以溢出去的。

比如：字体明显到屏幕外面去了，这在布局中要非常注意！

 

2.在最外层div加一个最小高度和宽度，这种对于大屏幕稍微友好一丢。

.bigDiv {

    min-width: 1600px;

    min-height: 900px;

    margin: auto;

    background-color: rgb(138 75 75);

}

测试用的代码

    <div class="bigDiv">

                    <div class="div1">

                        <span style="color: red;font-size: 32px;">

                            你好世界，你好世界，你好世界，你好世界，你好世界，你好世界，你好世界，你好世界你好世界你好世界你好世界你好世界你好世界你好世界，

                        </span>

                </div>

    </div>

.bigDiv {

    width: 1500px;

    height: 1000px;

    margin: auto;

    background-color: rgb(138 75 75);

}

.div1 {

    width: 20000px;

    height: 100px;

    margin: auto;

    background-color: rgb(20 19 19);

}