元素同行排列布局

最新推荐文章于 2021-11-06 23:17:25 发布

chancejl

最新推荐文章于 2021-11-06 23:17:25 发布

阅读量936

点赞数

本文链接：https://blog.csdn.net/qq_39833794/article/details/79922409

版权

在页面布局时经常会遇到一些明明设置了固定width的元素但是不能正常排列，简单的整理了下原因与方法

demo：五张img同行排列，每张宽度为20%，但是不可以全部同行排列

原因：由于img之间的间隙存在，占据了本应正常排列的宽度，影响正常布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    .wrap{
	    	width:100%;
	    	height: 400px;
	    	display: flex;
	    }
		img{
			width: 20%;
		}
	</style>
</head>
<body>
	<div class='wrap'>
	<img src="timg.jpeg" alt="">
	<img src="timg.jpeg" alt="">
	<img src="timg.jpeg" alt="">
	<img src="timg.jpeg" alt="">
	<img src="timg.jpeg" alt="">
</div>
</body>

解决方法：

1.img同行书写

img之间的换行符会导致占据空间

<img src="timg.jpeg" alt=""><img src="timg.jpeg" alt="">

但是很影响美观

2.font-size：0；

由于换行符之间的间隙，所以可以font－size为0

3.img使用浮动

img{
	width: 20%;
	float: left;	
   }

4.img父级加弹性盒子

.wrap{
  width:100%;
  height:400px;
  display:flex;
 }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chancejl

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
元素同行排列布局

在页面布局时经常会遇到一些明明设置了固定width的元素但是不能正常排列，简单的整理了下原因与方法demo：五张img同行排列，每张宽度为20%，但是不可以全部同行排列原因：由于img之间的间隙存在，占据了本应正常排列的宽度，影响正常布局&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-...
复制链接

扫一扫