CSS实现横列布局的方法总结
一、使用float实现横列布局的方法
如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行
div1 | div2 |
实现下面图片中布局的css样式如下:
1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下:
<section class="active_div1"> |
.active_div1 div { |
2、第二行只有中间图片的最有边距是5px;布局如下:
<section class="active_div2"> |
.active_div2 div { |
注意:使用box-sizing: border-box后如果没有其他样式,所有的块将全部贴在一起,中间是没有任何间距的。这也是一个很经典的布局
二、使用display:inline-block
display:inline-block大多数用于行块的转换,不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
红框中的布局就是使用display:inline-block最经典的布局。
<header id="consume_h"> |
.consume_h span { |
此处使用了伪类,关于伪类的定义是使用后面会有专门的笔记来记录,这里就不赘述了。
此出还有一个经典的布局:
<div>
<img src="" alt="">
<p>
测试勿拍
</p>
</div>
使用定位position:absolute常用于左边固定,右边自适应的情况。
- 对div进行相对定位
- 对img进行绝对定位
- p进行相对定位
三、使用flexible box实现 真正意义上的流体布局
CSS实现横列布局的方法总结的更多相关文章
- 一、CSS实现横列布局的方法总结
一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...
- 【css】css2实现两列三列布局的方法
前言 对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题.楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要 ...
- css实现三列布局,左右固定值,中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- CSS实现三列布局
三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...
- CSS实现两列布局,一列固定宽度,一列宽度自适应方法
不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap& ...
- CSS实现三列布局方法总结
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl
- HTML5+CSS实现三列布局自适应
利用CSS的float属性可以将元素并排,做出三列并排的布局. 如这样的效果 实现的原理:只要将3个元素设置float属性,属性值为left,同时指定不同比例的宽度,及高度. 下面是实现代码 < ...
- CSS 经典三列布局
一 圣杯布局 1 html结构 <!DOCTYPE html> <html> <head> <title></title> <link ...
- 纯CSS实现三列布局(两边固定,中间自适应)
看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.== 看代码: html: <div class="top&qu ...
随机推荐
- python实现微信接口(itchat)
python实现微信接口(itchat) 安装 sudo pip install itchat 登录 itchat.auto_login() 这种方法将会通过微信扫描二维码登录,但是这种登录的方式确实 ...
- 还原SQL SERVER系统库
还原SQL SERVER系统库 共需还原三个系统库,还原顺序:master>msdb>model 还原master (1).数据库配置管理器->数据库服务属性->启动参数-&g ...
- js函数一些小的知识点
var scope="123"; function aa(){ console.log(scope);//undefind var scope="234"; c ...
- ASP.NET Core部署到CentOS7,使用Nginx代理
ASP.NET Core 的运行环境由新开发的 Kestrel Server 负责,IIS 退回到 HTTP 的侦听器的角色,微软也特别为了这个需求开发了 IIS Platform Handler,以 ...
- CSharpGL(42)借助帧缓存实现渲染到纹理(RenderToTexture)
CSharpGL(42)借助帧缓存实现渲染到纹理(RenderToTexture) 渲染到纹理(Render To Texture)是实现很多OpenGL高级效果的一个基础.本文记录了如何用CShar ...
- 把angular项目整合到.net mvc中
之前的开发选择的是完全舍弃服务端,仅保留最简单web服务器提供angular经打包的静态资源,此外所有的业务与数据请求都访问一个分离的WebApi来实现.不过最近碰到一个需求,有必要使用多个客户端,而 ...
- LVS工作模式与调度算法
LVS三种工作模式.十种调度算法介绍 工作模式介绍: 1.Virtual server via NAT(VS-NAT) 优点:集群中的物理服务器可以使用任何支持TCP/IP操作系统,物理服务器可以分配 ...
- 【Android Developers Training】 65. 应用投影和相机视图
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 5.VBS的一些约定,提高可读性
1.变量命名约定 2.变量作用域 1)过程级,在事件中,函数或者子过程中 2)Script级,在head部分 原则,定义尽量小的作用域 3.在某个过程开头应该包括这些注释
- Vim练级笔记(持续更新)
漫漫练级路...作为一个VS重度依赖患者,又加上visual assist X 这种懒人必备的神级插件,转投vim门下,真是各种疼... vim用着用着就有拿鼠标去点的冲动,有木有啊! 不过经过一段时 ...