0

0

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

php中文网

php中文网

发布时间:2016-06-24 12:08:59

|

1329人浏览过

|

来源于php中文网

原创

	
aaa
aaa


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

蕉点AI
蕉点AI

AI电商商品图生成平台 | 智能商品素材制作工具

下载

回复讨论(解决方案)

#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

它已经是自适应了。。

            
aaa
aaa

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

不是这样子呐~



如果没外层限制

根本不需要用这个了
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就不会卡了。

结贴了 

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

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

22

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

24

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

99

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

132

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

15

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

65

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

61

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

63

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
UNI-APP开发(仿饿了么)
UNI-APP开发(仿饿了么)

共32课时 | 8.8万人学习

JavaScript OOP调试技巧视频教程
JavaScript OOP调试技巧视频教程

共5课时 | 1.0万人学习

Uniapp微信小程序1:1仿饿了么首页
Uniapp微信小程序1:1仿饿了么首页

共5课时 | 2.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号