本来还很好看
一旦缩放窗口,就成了这样
恶心吐了要。
经过查找,给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);
}