怎么适应宽度自动换行

2012-03-24

如何适应宽度自动换行?CSS codestyle#list {width:200px}#left {float:leftborder:1px solid blue}#

如何适应宽度自动换行?

CSS code

<style>    #list {        width:200px;    }    #left {        float:left;        border:1px solid blue;    }    #right {        float:right;        word-break: break-all;        word-wrap: break-word;        /*         有一前提不能写死width属性        因为像#block那块的#right宽度很明显与上面的不一致了        */                border:1px solid red;    }    #block {        margin-left:60px;    }    .c {        clear:both;    }    </style>    <div id="list">        <div>            <div id="left">aaa</div>            <div id="right">dddddddddddddddddddddddddddd</div>            <div class="c"></div>        </div>        <div id="block">            <div id="left">aaa</div>            <div id="right">dddddddddddddddddddddddddddd</div>            <div class="c"></div>        </div>    </div>

上面有没css的解决方案?
用js来适应的话过于复杂了，因为可能套很多层、加上如很多要处理的话，一大批操作ie会吃不消。

[解决办法]

探讨

不是这样子呐~

如果没外层限制

根本不需要用这个了
word-break: break-all;
word-wrap: break-word;

也就没有需要自动换行之说了

引用:

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//……

[解决办法]
<!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=utf-8" />
<title>无标题文档</title>
<style>
.main{width:200px; font:12px/24px Arial, Helvetica, sans-serif; float:left; display:inline; margin:20px; background:#ccc; word-wrap: break-word; white-space: pre-wrap;}
</style>
</head>
<body>
<div class="main">dsafsdfasdf</div>
</body>
</html>
[解决办法]
没看到有多少大网站是自适应的
[解决办法]
楼主的头像好萌希望楼主公开一下解决方法学习学习...

热点排行

CSS

怎么适应宽度 自动换行

怎么适应宽度自动换行