css实现三列图片等宽等间距排列-CSDN博客

本文链接：https://blog.csdn.net/weixin_44185143/article/details/110210131

文章目录

方法1.设置浮动和外间距
方法2.用弹性盒子
方法3.用多列布局

图片说明

方法1.设置浮动和外间距

每个图片设置左浮动，宽度30%，左外间距2.5%。
100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>三列图片等间距排列</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width:100%;
            height:300px;
            border:1px solid #000;
        }
        img{
            display:inline-block;
            width:30%;
            height:300px;
            margin:0 0 0 2.5%;
            float:left;
        }
    </style>
</head>
<body>
<div>
    <img src="./image/nae0.jpg " alt=""/>
    <img src="./image/nae0.jpg " alt=""/>
    <img src="./image/nae0.jpg " alt=""/>
</div>
</body>
</html>

width:30%; 表示是父级元素宽度的30%。

方法2.用弹性盒子

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>三列图片等间距排列</title>
    <style>
      *{
            margin:0;
            padding:0;
        }
        div{
            display:flex;
            flex-direction:row;
            width:100%;
            height:300px;
            margin:0 2.5% 0 0;
        }
        img{
            display:flex;
            width:30%;
            height:300px;
            margin:20px 0 0 2.5%;
        }
    </style>
</head>
<body>
<div>
    <img src="./image/nae0.jpg " alt=""/>
    <img src="./image/nae0.jpg " alt=""/>
    <img src="./image/nae0.jpg " alt=""/>
</div>
</body>
</html>

display:flex; 将当前元素定义为弹性容器。
flex-direction 属性指定了弹性子元素在父容器中的位置。
flex-direction:row; 横向从左到右排列（左对齐），默认的排列方式。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

方法3.用多列布局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>三列图片等间距排列</title>
    <style>
      *{
            margin:0;
            padding:0;
        }
        div{
            width:100%;
            height:350px;
            column-count:3; 
            column-rule:1px solid #666;
            border:1px solid #666;
        }
        img{
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
<div>
    <img src="./image/nae0.jpg " alt=""/>
    <img src="./image/nae0.jpg " alt=""/>
    <img src="./image/nae0.jpg " alt=""/>
</div>
</body>
</html>

column-count:3; 将div元素分为3列。
column-rule属性设置列之间的宽度，样式和颜色。

注意：用column属性将图片设置为多列排布时，可能会出现一些样式混乱。此时，通过增加div的高使样式达到预期效果。