[CSS]图片水平排列并且有固定间隔

转载 2018年04月16日 13:27:16

相信大家肯定都碰到过这样的需求:

可能设计图是这样的 
这里写图片描述

先来简单分析一下这里的几点要求

  • 八张图片水平排列
  • 图片之间固定间隔
  • 图片大小相同
  • 总宽度100%

demo

html

<div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

css

* {box-sizing: border-box;}
.row .col {
  float: left;
  width: 12.5%;
  background-color: #0f0;
  border: 10px solid #fff;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

效果图

效果图

这样,以后如果要更改间距,只要更改border-width即可了

原理

  • 最基本的一点,要设置盒子模型为border-box,这样就能保证每一个col的宽度计算方式为content+padding+border,就算设置了padding或者border也不会影响总宽度。

  • 其次,用边框(padding也可以)模拟间距(给边框设置与row背景色相同的颜色)

转载地址:https://blog.csdn.net/qq807081817/article/details/49099401

MS SQLSERVER中如何快速获取表的记录总数

 在数据库应用的设计中,我们往往会需要获取某些表的记录总数,用于判断表的记录总数是否过大,是否需要备份数据等。我们通常的做法是:select count(*) as c from tableA 。然而...
  • eaglet
  • eaglet
  • 2003-05-27 11:13:00
  • 1444

div+css图片横向排列

css代码: ul,li{ padding:0; margin:0; overflow:hidden;} li{ list-style:none;} img{ border:0;} .box{ wid...
  • shenyingkui
  • shenyingkui
  • 2014-09-25 10:24:35
  • 731

CSS + ul li 横向排列的两种方法

CSS + ul li 横向排列的两种方法 superbirds superbirds superbirds superbirds ...
  • superbirds
  • superbirds
  • 2017-03-30 21:12:07
  • 16218

css margin参考和两个div水平排列的解决方案

首先自己给出margin的四个值的顺序,这个不是难点但是自己列在这里作为参考吧:例子 1margin:10px 5px 15px 20px; 上外边距是 10px 右外边距是 5px 下外边距是 15...
  • ul646691993
  • ul646691993
  • 2015-05-08 18:36:50
  • 977

DIV_CSS布局问题:3个水平对齐布局的DIV,左右固定宽,中间宽度自动填充

作为一个前端小白,这是我面试前端职位的题目之一,没有实践经验,误打误撞,最后还是错了! 今天难得有时间,认真思考了一下。答案不一定最佳的解决方案,但是能实现同等效果。 问题描述:一个宽度不确定的D...
  • github_22022001
  • github_22022001
  • 2015-08-04 16:49:04
  • 1969

CSS图片与文字水平对齐

1) 图片没使用float(文字为行内元素):图片元素需加上vertical-align:middle(此语句对float元素无效),然后通过使用margin-top(不加上先前语句使用此语句会使图片...
  • wayne0902
  • wayne0902
  • 2016-05-28 11:29:50
  • 3765

CSS实现三列图片等宽等间距布局

每个图片块左浮动,宽30%,左外边距2.5%: 100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5% html> head> meta charset="utf-...
  • qq_17505335
  • qq_17505335
  • 2016-07-16 16:32:27
  • 644

html设置图像水平间距

设置图像的水平间距 选择您喜欢的头像 人物头像 另一组 效果:...
  • u010383937
  • u010383937
  • 2017-05-17 07:26:08
  • 1339

【干货】:怎么让元素水平排列

出自:http://www.myexception.cn/HTML-CSS/2099946.html         块级元素默认是垂直排列的,而行内元素是水平排列的,而...
  • zwhfyy
  • zwhfyy
  • 2017-05-31 11:13:18
  • 521

li标签水平布局时莫名其妙的间距

在写前端的时候经常要用到标签水平平铺。今天聊一聊出现的一个莫名其妙的边距问题和解决办法。啥也不说,直接代码 *{margin: 0px;padding: 0px;} li{display:...
  • cyp18408251336
  • cyp18408251336
  • 2016-08-24 14:41:11
  • 1320
收藏助手
不良信息举报
您举报文章:[CSS]图片水平排列并且有固定间隔
举报原因:
原因补充:

(最多只允许输入30个字)