Heim  >  Artikel  >  Web-Frontend  >  如何适应宽度 自动换行?_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:08:591104Durchsuche

<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">


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

你这个也是写死了宽度。

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


没看到有多少大网站是自适应的

这问题已完美解决了。

楼主的头像好萌  希望楼主公开一下解决方法 学习学习...

优化了结构。不套层,问题就简单了。
用js也可以、公开处理就ie就不会卡了。

结贴了 

楼主的头像好萌  希望楼主公开一下解决方法 学习学习...

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn