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

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:08 PM

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

你这个也是写死了宽度。

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

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

这问题已完美解决了。

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

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

结贴了

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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。