网页设计时为什么浏览器以缩小横排的字就被挤到下面去了？
</head>
<body>
<p align="center" style="font-family:'caviardreams italic'; font-size:32px; " > Clemmie Cao Photography </p>
<div id="content" >
<p>Portrait Event PersonalWork StreetPhoto FashionBlog</p>
</div>
<div>
<img id="wp1" src="images/webhome1.jpg"/>
</div>
<style>
#wp1 { width:15%; height:auto; padding-left:45px;}
#content { text-align:center; font-family:"bellota bolditalic"; word-spacing:220px; }
</style>
</body>
</html>
请问如何保证横排字的位置与间距还有图片的大小在不同的显示屏上都能够实现自动调整大小？
谢谢！
这是浏览器自己适应的结果。文字是被装在类似盒子里的地方的，当浏览器缩小以后，相应的盒子也会缩小，文字在里面挤得慌就到下面去了。这是浏览器为了让你在小屏幕上还可以看见全部的文字做的设计。要想不让字挤到下面去，只要把对应的盒子设为固定的宽度就行了。
看你的话不像是内行，有啥不懂的代码问我就行了。
看你的话不像是内行，有啥不懂的代码问我就行了。
温馨提示：内容为网友见解，仅供参考
第1个回答 2014-02-05
给容器设置最小宽度就可以了：
例如：min-width:300px;
那么横排的字就不会随浏览器的缩放而换行了。
对于文字排版和图片自动适应浏览器，这个不太现实，图片可以用百分比，但文字是没办法用百分比的，只能求一个适应大部分浏览器分辨率的解决办法
例如：min-width:300px;
那么横排的字就不会随浏览器的缩放而换行了。
对于文字排版和图片自动适应浏览器，这个不太现实，图片可以用百分比，但文字是没办法用百分比的，只能求一个适应大部分浏览器分辨率的解决办法
第2个回答 推荐于2017-09-07
需要文字根据浏览器变化大小，可以用rem来实现，然后用媒体查询根据不用的分辨率定义不同的临界点。如果整站需要适应的地方多得话，用rem实现是很好的解决方案(http://ued.taobao.org/blog/2013/05/rem-font-size/)。
图片需要自适应的话就定义宽度百分比，高度可以不用定义。
图片需要自适应的话就定义宽度百分比，高度可以不用定义。
第3个回答 2014-02-06
用百分比，当百分比的宽度不能容下这些字时，就要考虑响应式了本回答被提问者采纳
第4个回答 2015-11-25
楼主你是不是用了浏览器自带的缩放功能，如果是那样的话，代码是没问题的
相似回答
