目前移动版等分布局最常用的是 flex 等分,pc 端上用得更多则是 float。

假设父元素下有 3 个子元素,每个子元素相隔 24px,子元素等分父元素宽度

实现:float + margin (inline-block + margin)

// html

<div class="parent">

<div class="children"></div>

<div class="children"></div>

<div class="children"></div>

</div>

// css

.parent {

overflow: hidden;

margin-right: -24px;

}

.children {

float: left;  // 不使用 float ,display: inline-block;

width: calc(100% / 3 -24px);

height: 100px;

margin-right: 24px;

}

css 实现等分布局的更多相关文章

  1. CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局

    <title>三个div变红</title> <style> *{margin: 0; padding: 0} body{ text-align: center; ...

  2. 实现CSS等分布局的4种方式

    × 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...

  3. 实现CSS等分布局的5种方式

    前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的5种方式 float [思路一]float 缺点:结构和样式存在耦合性,IE7-浏览器下对宽度百分比取值存在四舍五入的 ...

  4. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  5. CSS3_伸缩盒模型_弹性布局_等分布局_flex 布局

    伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想: 让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间. 特点: display: flex;    只能控制其子元 ...

  6. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

  7. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

  8. DIV+CSS常用网页布局技巧!

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  9. DIV+CSS列表式布局(同意图片的应用)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. tensorFlow入门实践(二)模块化

    实现过一个例子之后,对TensorFlow运行机制有了初步的了解,但脑海中还没有一个如何实现神经网络的一个架构模型.下面我们来探讨如何模块化搭建神经网络,完成数据训练和预测. 首先我们将整体架构分为两 ...

  2. mysql 的存储过程 循环 变更某个表里的字段

    /*Navicat MySQL Data Transfer Source Server : localhost_3306Source Server Version : 50505Source Host ...

  3. Openresty 进行路由系统设计

    1.系统基础设计图为: 用户通过Http访问Openresty(Nginx + Lua), 其中Nginx虚拟主机中配置文件进行Lua脚本加载. LUA通过nginx内置变量或者http请求中变量来区 ...

  4. .NET并行计算和并发11:并发接口 IProducerConsumerCollection

    using System; using System.Collections; using System.Collections.Generic; using System.Collections.C ...

  5. 帝国cms中下拉框select的绑定

    在修改数据模型中,将下拉框的表示代码换成下: 将id换成自己的id地址.数据库查询中的classid换成自己创建栏目的id. <select name="diqu" id=& ...

  6. iOS 10 Programming Fundamentals with Swift 学习笔记 0

    1,a single statement can be broken into multiple lines ,For example, after an opening parenthesis is ...

  7. Autolayout Breakpoints

    articles archives team Autolayout Breakpoints Auto layout has become a crucial tool for iOS and OS X ...

  8. thinkphp5.0验证的封装

    刚学完这个验证器封装,刚开始还是有点晕的,后面仔细看了两遍,才慢慢感觉到了继承这个方法的好处,看来还得慢慢锻炼锻炼; 问题:结合上篇的自定义验证器,发现每次使用验证器都重复这样写代码;//验证器$va ...

  9. 安卓APP性能测试的一些方面

    1. 启动速度 2. 点击/滑动等事件响应速度 3. 下载速度 4. 界面流畅程度,比较帧率 5. 耗电量测试 6. 流量测试 7. 内存泄漏 8. CPU 9. Monkey adb -s FJH5 ...

  10. WEB测试专题之测试分类

    虽然说是一个功能测试就概括了,但是其实这里面还别有洞天,大概区分为下面几个小类别:WEB测试专题之web测试分类一(1)链接测试链接是Web应用系统的一个主要特征,它是在页面之间切换和指导用户去一些不 ...