css布局 三栏 自动换行
1、代码实现
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css布局 三栏 自动换行</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .pp {
width: 100%;
overflow: hidden;
} .c {
float: left;
width: 200px;
border: 1px solid darkred;
box-sizing: border-box;
} .c+.c {
/* 计算方式 (100%-200*3)/2 */
margin-left: calc(50% - 300px);
} /* 特殊处理 */
.c:nth-of-type(3n+1) {
margin-left: 0;
}
</style>
</head>
<body>
<div class="pp">
<div class="c">
123
</div>
<div class="c">
123
</div>
<div class="c">
123
</div>
<div class="c">
123
</div>
<div class="c">
123
</div>
<div class="c">
123
</div>
<div class="c">
123
</div>
<div class="c">
123
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
2、效果
css布局 三栏 自动换行的更多相关文章
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- CSS布局——三栏布局
说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...
- 基本CSS布局三
基本CSS布局三------图片视频网格 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- CSS实现三栏布局(5种)
常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...
- 【CSS】三栏/两栏宽高自适应布局大全
页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...
- 【CSS】三栏布局的经典实现
要求:自适应宽度,左右两栏固定宽度,中间栏优先加载: <!DOCTYPE html> <html> <head> <title>layout</t ...
- 前端经典面试题之CSS实现三栏布局,左右宽度固定,中间宽度自适应
前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...
随机推荐
- 本地docker搭建gitlab, 并配置ldap认证
基于Docker在Mac OS X系统中的部署和设置GitLab的具体过程如下: 1. 安装Docker for Mac (参见https://docs.docker.com/docker-for ...
- ListView取消和自定义分割线的方法
一.不显示分割线 XML android:footerDividersEnabled="false"即可. JAVA mListView.setDivider(null); 二.改 ...
- python 多线程日志切割+日志分析
python 多线程日志切割+日志分析 05/27. 2014 楼主最近刚刚接触python,还是个小菜鸟,没有学习python之前可以说楼主的shell已经算是可以了,但用shell很多东西实现起来 ...
- modbus.c
#include <avr/io.h> #include <avr/interrupt.h> #include <util/delay.h> //#include ...
- 02 如何创建线程 线程并发与synchornized
所有程序运行结果 请自行得出 创建线程方式一:继承Thread类 步骤: 1,定义一个类继承Thread类. 2,覆盖Thread类中的run方法. 3,直接创建Thread的子类对象创建线程. 4, ...
- 机器翻译评价指标之BLEU详细计算过程
原文连接 https://blog.csdn.net/guolindonggld/article/details/56966200 1. 简介 BLEU(Bilingual Evaluation Un ...
- 洛谷 P1138 第k小整数
题目描述 现有n个正整数,n≤10000,要求出这n个正整数中的第k个最小整数(相同大小的整数只计算一次),k≤1000,正整数均小于30000. 输入输出格式 输入格式: 第一行为n和k; 第二行开 ...
- Centos 7安装protobuf3.6.1
新版本 google protobuf-3.6.1是现在最新版本,添加了新的特性,看说明 下载地址 https://github.com/protocolbuffers/protobuf/releas ...
- @Autowired用法详解
@Autowired 注释,它可以对类成员变量.方法及构造函数进行标注,完成自动装配的工作. 通过 @Autowired的使用来消除 set ,get方法.在使用@Autowired之前,我们对一个b ...
- 第四章 logstash - type与tags属性
参考:http://kibana.logstash.es/content/logstash/plugins/input/stdin.html 最常用法: input { stdin { tags =& ...