网页布局中高度塌陷的解决方法

平时在网页布局的时候总是有文字内容多了，超过溢出限制的高度，那么就会有一些图片会撑破DIV，让网页错位变乱的问题，那如何解决呢？

这就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。

特别是在IE6，如果内容超出对象高度和宽度承载，将会被撑破增高，这个时候可以利用以下解决方法。

 

㈠解决CSS样式

这时我们可以使用CSS overflow样式解决：

对应样式：Div{overflow:hidden}

这样设置后，假如DIV对象设置一定宽度高度，此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。

 

㈡隐藏超出内容案例

隐藏超出对象宽度高度文字内容

假如我们在一个布局中为了美观对齐，有时我们需要设置了对象高宽后就固定了，这个时候需要实现无论多少内容文字都不要超出设置宽度高度布局，这个时候我们需要overflow:hidden帮忙。

 

CSS代码：

<style> 

.div{ width:300px; height:50px; line-height:25px; overflow:hidden} 

/* 设置对象高度宽度，同时设置overflow:hidden */

</style>

Html代码：

<div class="div">向阳而生

 

㈢解决撑破内容方法

这样设置了overflow:hidden无论多少内容都会隐藏对象设置宽度和高度以外装不下的内容。

这里设置一个一定CSS宽度和CSS高度的对象盒子，放一个大的图片，然后使用overflow:hidden隐藏其超出部分。

 

Css代码：

<style> 

.div{ width:300px; height:50px; line-height:25px; overflow:hidden} 

/* 设置对象高度宽度，同时设置overflow:hidden */

</style>

HTML代码：

<div class="div"> 

<img src="img/1.jpg" /> 

</div>

 

所以，要想让内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可。

 

 

相关内容细看下面的博客：https://www.cnblogs.com/nyw1983/p/11374405.html