【求助】如何用纯CSS实现如下效果?
css吧
全部回复
仅看楼主
level 1
超级多线程
楼主
<div>
<div>这里是一行长度不固定的文字</div>
<div>
这是一行比较长一些,但是需要自动换行的文字,长度需要根据上面的文字长度进行换行。
</div>
</div>
最后实现出来的效果就是
这里是一行长度不固定的文字
这是一行比较长一些,但是需
要自动换行的文字,长度需要
根据上面的文字长度进行换行
。
尽量不用定位,各位高手求助!
2017年12月05日 05点12分
1
level 5
gsgsgs986
有没有图
2017年12月05日 12点12分
2
level 5
gsgsgs986
换行的话可以调整div的大小的
2017年12月05日 12点12分
3
rickqin
他的意思你估计没明白。楼主是想让第二个div的宽度跟随第一行文字的那个div的宽度一样,而且,还得是动态的。第一行文字变多时,宽度也随之增加。而且用纯CSS来实现
2017年12月05日 13点12分
level 7
rickqin
你找到解决办法了吗?
我能想到的两个办法:
1、用纯CSS的话,有一个条件,就是外面的div必须要有固定宽度,而不是通过内部内容来撑开。比如:
<div style="width:600px;">
这是第一行文字
<div style="width:100%;">
这里是很多需要自动换行的文字内容,这里是很多需要自动换行的文字内容,这里是很多需要自动换行的文字内容,这里是很多需要自动换行的文字内容,这里是很多需要自动换行的文字内容,这里是很多需要自动换行的文字内容,这里是很多需要自动换行的文字内容,这里是很多需要自动换行的文字内容。
</div>
</div>
2、用JS获得包含第一行文字的div的宽度,然后用这个宽度来设置第二个div的宽度。
2017年12月05日 13点12分
5
level 7
rickqin
我呢,倒是有一个变通做法。如果你仅仅是想实现效果的话,我觉得还是比较可行的。看下图:
HTML5 + Chrome62.0.3202.75 (Official Build) (64-bit) 测试可用。应该可以满足你的需求。
2017年12月05日 13点12分
7
超级多线程
高手··
2017年12月08日 01点12分
超级多线程
有兴趣的话可以到这里回一下,你这个方案应该是唯一解了,分可以归你,知识归大家:)十分感谢!
2017年12月08日 01点12分
超级多线程
https://zhidao.baidu.com/question/2016331165176680708.html?entry=qb_uhome_tag
可以到这里发一下:)分给你:)
2017年12月11日 11点12分
rickqin
@超级多线程
谢谢,我在知道里贴了这个帖子的链接。
2017年12月13日 15点12分
1