如何适应宽度 自动换行?

ci1699 2012-03-21 05:04:25 


<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会吃不消。
...全文
246 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
ci1699 2012-03-22
  • 打赏
  • 举报
 回复
优化了结构。不套层，问题就简单了。
用js也可以、公开处理就ie就不会卡了。

结贴了

[Quote=引用 15 楼 a597926661 的回复:]

楼主的头像好萌 希望楼主公开一下解决方法 学习学习...
[/Quote]
a597926661 2012-03-22
  • 打赏
  • 举报
 回复
楼主的头像好萌 希望楼主公开一下解决方法 学习学习...
ci1699 2012-03-22
  • 打赏
  • 举报
 回复
这问题已完美解决了。
Acesidonu 2012-03-21
  • 打赏
  • 举报
 回复
没看到有多少大网站是自适应的
ci1699 2012-03-21
  • 打赏
  • 举报
 回复
你这个也是写死了宽度。

[Quote=引用 10 楼 zhoulina251314 的回复:]

<!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="Conte……
[/Quote]
ci1699 2012-03-21
  • 打赏
  • 举报
 回复
用js可以解决这问题，但诸多问题，因为我实际应用可能套很多层。


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



[Quote=引用 8 楼 zsx841021 的回复:]

引用 7 楼 ci1699 的回复:

不是这样子呐~



如果没外层限制

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

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

引用 6 楼 zsx841021 的回复:

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XH……
[/Quote]
zhoulina251314 2012-03-21
  • 打赏
  • 举报
 回复
<!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>
三石-gary 2012-03-21
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 ci1699 的回复:]

这个是外面的没关系，

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

引用 1 楼 zsx841021 的回复:

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。
[/Quote]
这个你给最外层加个背景色就看出来了。。。
三石-gary 2012-03-21
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 ci1699 的回复:]

不是这样子呐~



如果没外层限制

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

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

引用 6 楼 zsx841021 的回复:

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//……
[/Quote]
如果限制最外层宽度。。。里层在超过的时候会被自动换行的。。要不然就用JS。。外层的宽度根据里层的宽度再改变。。但总觉得还是不行。。这样的话就等于没有设置外层宽度了。。
ci1699 2012-03-21
  • 打赏
  • 举报
 回复
不是这样子呐~



如果没外层限制

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

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

[Quote=引用 6 楼 zsx841021 的回复:]

HTML code
<!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></ti……
[/Quote]
三石-gary 2012-03-21
  • 打赏
  • 举报
 回复 
<!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>

是这样的效果吗？。。最外层没有规定宽度。。
ci1699 2012-03-21
  • 打赏
  • 举报
 回复
那需要left 与right两块并列一行显示，需要怎么写法?


[Quote=引用 4 楼 zsx841021 的回复:]

引用 2 楼 zsx841021 的回复:

引用 1 楼 zsx841021 的回复:

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

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

它已经是自适应了。。
[/Quote]
三石-gary 2012-03-21
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 zsx841021 的回复:]

引用 1 楼 zsx841021 的回复:

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

所以没办法把外层撑开只能word-break
[/Quote]
它已经是自适应了。。
ci1699 2012-03-21
  • 打赏
  • 举报
 回复
这个是外面的没关系，

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

[Quote=引用 1 楼 zsx841021 的回复:]

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。
[/Quote]
三石-gary 2012-03-21
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 zsx841021 的回复:]

#list {
width:200px;
}
由于你最外层已经限定了宽度。。。
[/Quote]
所以没办法把外层撑开只能word-break
三石-gary 2012-03-21
  • 打赏
  • 举报
 回复
#list {
width:200px;
}
由于你最外层已经限定了宽度。。。
ireport中布局设置
实现在报表中属性的长度超过TextField的框的宽度时自动换行，关并且使旁边的几条线也跟着自动适应
CSS实现连续字符换行的方法
本文实例讲述了CSS实现连续字符换行的方法。分享给大家供大家参考。具体分析如下： 连续字符的CSS换行，主要用到CSS的word-break属性，为其添加:break-all参数，这样的话字符会适应规定的宽度而自动换行，实际上这就是CSS的强制换行功能。 复制代码代码如下:<title>连续字符的CSS换行代码</title>
ddddddddddddddddddddddddddddddddddddrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrvv
vue-resize-text：vue指令，可根据元素宽度自动调整字体大小
Vue调整文字大小 Vue指令可根据元素宽度自动调整字体大小。 它使字体大小在灵活或响应式布局上具有灵活性。 ：调整浏览器视口的大小以查看实际效果 安装 通过NPM安装 $ npm install vue-resize-text --save 通过CDN安装 < script src =" https://unpkg.com/vue " > </ script > < script src =" https://unpkg.com/vue-resize-text " > </ script > 全球 全局注册VueResizeText： import Vue from 'Vue' ;
WPF学习笔记-FlowDocument实现表格单元格垂直居中以及边框设置
FlowDocument是WPF的高级文档功能（如分页和列）承载流内容和设置流内容格式。 其中的块元素Table可以很方便的添加并展示表格，但是其无法实现自动换行，我尝试了网上搜索解决方案以及自己尝试修改。 在网上搜索了不同的解决方案，包括手动计算高度，通过Margin属性来实现类似居中的问题，或者尝试在单元格中添加BlockUIContainerl来实现居中，但是实际由于TableCell自身没有居中，或者适应宽度，最终都以失败告终。
纯css无限级导航
一个用纯css做的无限极导航，只有一个页面，简单，简洁，演示里面已经添加到9级菜单导航，还可增加更多，但是子导航靠左还是靠右是要手动添加css样式控制。各级菜单都可以随内容的长度自行适应宽度，而当浏览器分辨率较低时一级导航也可以自动换行，而多级子菜单靠左显示还是得手动调整。 DOM结构非常简单，只是 ul.nav 与 li.item 的互相嵌套而已。 看代码吧（长是长了点，但其实你会发现导航的标签结构真的真的很简单，重要的是CSS部分）其实css部分也超简单。
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章