css实现三列图片等宽等间距排列 |
您所在的位置：网站首页 › 三组图片合一图片背景怎么做 › css实现三列图片等宽等间距排列 |
css实现三列图片等宽等间距排列
|
文章目录
方法1.设置浮动和外间距方法2.用弹性盒子方法3.用多列布局
每个图片设置左浮动，宽度30%，左外间距2.5%。 100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5% 三列图片等间距排列 *{ 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; }
width:30%; 表示是父级元素宽度的30%。 方法2.用弹性盒子 三列图片等间距排列 *{ 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%; }
display:flex; 将当前元素定义为弹性容器。 flex-direction 属性指定了弹性子元素在父容器中的位置。 flex-direction:row; 横向从左到右排列（左对齐），默认的排列方式。 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。 方法3.用多列布局 三列图片等间距排列 *{ 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; }
column-count:3; 将div元素分为3列。 column-rule属性设置列之间的宽度，样式和颜色。 注意：用column属性将图片设置为多列排布时，可能会出现一些样式混乱。此时，通过增加div的高使样式达到预期效果。 |
【本文地址】