css div自适应宽度实例

当内容超出父级元素宽度，在未设置white-space:nowrap时会自动换行，设置了white-space:nowrap样式又不能关联到滚动条延伸的部分，解决方案如下：

1、在父级元素添加white-space:nowrap属性；

2、计算（每一行）内容宽度；

a、将内容拆分，包括缩进、图片和文字。

b、利用《又谈换行情况处理》中在body末尾添加非换行dom元素计算文字宽度。

c、叠加拆分的小块宽度为总宽度。

3、去掉父级元素的white-space:nowrap属性；

4、取2中最大宽度，设置成父级元素的宽度（最好在该精确宽度的基础上增加6px-8px的宽度预留给滚动条，一是满足滚动条出现，二是也不会贴边）。

该方法优点（与之前几种方案相比）：

1、宽度计算准确。

2、性能稳定，没有之前循环“试探”的过程，遍历一遍节点即可完成。

现在看个实例

代码如下

复制代码

<title>CSS 宽度自适应</title>
<style type=”text/”>
*{margin:0;padding:0;}
li {
text-align:center;border:2px solid red;line-height:20px;
min-height:100px;font-size:9pt; display:inline-block;*display:inline;*zoom:1;_height:100px;margin:5px;vertical-align:top
}
li img {
vertical-align:top
}
</style>
<ul>
<li>我们都是炎黄子孙！</li>
<li>告诉我你还爱我，我知道你心里已不再有，其实你要放弃，还是你要挽留，我都会付出我的所有！</li>
<li>我爱你</li>
<li><img src=”/” /></li>
<li>你爱我不？</li>
<li>你知不知道，我等的花儿已谢了！</li>
<li><img src=”/images/logo.gif” /></li>
</ul>

从代码里你丝毫看不出为什么这样会自适应宽度，这就是本段代码的微秒之处，希望你认真阅读一下，探个究竟。答案是inline-block。

实例1

代码如下

复制代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<style type=”text/css”>
<!–
div {
height: 5em;
line-height: 5em;
text-align: center;
margin: 0;
padding: 0;
}
#d1, #d3, #d4, #d6 {
float: left;
background: #CCC;
}
#d1 {
width: 20%;
}
#d2 {
float: left;
width: 30%;
background: red;
}
#d3 {
width: 50%;
}
#d4 {
width: 200px;
margin-right: -3px;
}
#d5 {
background: red;
line-height: 1.4em;
text-align: left;
}
#d6 {
width: 300px;
float: right;
margin-left: -3px;
}
div[id=”d4″] {
margin-right: 0 !important;
}
div[id=”d6″] {
margin-left: 0 !important;
}
–>
</style>
</head>

<body>
<h2>百分比宽度</h2>
<div id=”d1″>20%</div>
<div id=”d2″>30%</div>
<div id=”d3″>50%</div>
<h2>自适应</h2>
<div id=”d4″>left:200px</div>
<div id=”d6″>right:300px</div>
<div id=”d5″>自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应自适应</div>
</body>
</html>

相关文章：

你感兴趣的文章：

标签云：