浮动处理HTML5图文混排

最新推荐文章于 2024-07-09 22:55:28 发布

可乐6666

最新推荐文章于 2024-07-09 22:55:28 发布

阅读量5.5k

点赞数 1

分类专栏： CSS HTML 文章标签： css html html5 图文混排

本文链接：https://blog.csdn.net/xuexizhe88/article/details/70243365

版权

HTML 同时被 2 个专栏收录

13 篇文章 2 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

1、在日常列表中会用到图文混排的效果，如下图选取今日头条中一个左边文字，右边图片的例子为例：

2、解决办法：

ul{padding: 0.5rem;width: 100%;overflow: hidden;font-size: 1.2rem;}
li{padding: 0.5rem;}
.right{float: right;}
.right img{width: 8rem;height: 6rem;}
.left{padding-right: 9rem;}
.btns{font-size: 1rem;}

<ul>
	<li>
		<div class="right">
			<img src="img/index-bg.jpg"/>
		</div>
		<div class="left">
			<p>这是大段文字这是大段文字这是大段文字这是大段文字这是大段文字这是大段文字这是大段文字这是大段文字</p>
			<p class="btns"><span>评论</span><span>阅读数</span></p>
		</div>
	</li>
</ul>

3、效果图