如何适应宽度自动换行?_html/css_WEB-ITnose-html教程-PHP中文网

如何适应宽度自动换行?_html/css_WEB-ITnose

WBOY

发布： 2016-06-24 12:08:59

原创

1116 人浏览过

<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会吃不消。

回复讨论(解决方案)

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。
所以没办法把外层撑开只能word-break

这个是外面的没关系，

现在需要效果是里面的left 与right两块并列一行显示

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。

引用 1 楼 zsx841021 的回复:

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。

所以没办法把外层撑开只能word-break
它已经是自适应了。。

那需要left 与right两块并列一行显示，需要怎么写法?

引用 2 楼 zsx841021 的回复:

引用 1 楼 zsx841021 的回复:

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。

所以没办法把外层撑开只能word-break

它已经是自适应了。。

<!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>    <title></title>    <style>                #right,#left        {            float: left;            border: 1px solid blue;            word-break: break-all;            word-wrap: break-word;        }       #right        {                        border: 1px solid red;        }        #block        {            margin-left: 60px;        }        .c        {            clear: both;        }    </style></head><body>    <div id="list">        <div>            <div id="left">                aaa</div>            <div id="right">                dddddddddddddddddddd</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></body></html>

登录后复制

是这样的效果吗？。。最外层没有规定宽度。。

不是这样子呐~

如果没外层限制

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

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

HTML code
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

…… 不是这样子呐~ 如果没外层限制 根本不需要用这个了 word-break: break-all; word-wrap: break-word; 也就没有需要自动换行之说了 引用 6 楼 zsx841021 的回复: HTML code nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//…… 如果限制最外层宽度。。。里层在超过的时候会被自动换行的。。要不然就用JS。。外层的宽度根据里层的宽度再改变。。但总觉得还是不行。。这样的话就等于没有设置外层宽度了。。 这个是外面的没关系， 现在需要效果是里面的left 与right两块并列一行显示 引用 1 楼 zsx841021 的回复: #list { width:200px; } 由于你最外层已经限定了宽度。。。 这个你给最外层加个背景色就看出来了。。。 nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta> <title>无标题文档

dsafsdfasdf

用js可以解决这问题，但诸多问题，因为我实际应用可能套很多层。

如果用css能解决的话就好了。像这样写死#right width:100px;
就可以达到这样效果。但又不能写死。

引用 7 楼 ci1699 的回复:

不是这样子呐~

如果没外层限制

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

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

引用 6 楼 zsx841021 的回复:

HTML code
nbsp;html PUBLIC "-//W3C//DTD XH……