一、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 ...
随机推荐
- lua路径问题
方法1:lua进行require绝对路径时,会从package.path中进行遍历 print(package.path)会得到类似下面的结果: --> "lualibs/p4ulib ...
- 溶解shader
玩神界原罪2,感觉人物被建筑遮挡时,建筑的“溶解”效果很有意思,想实现一下.然后发现连溶解都没实现过,emmmmm....先来把溶解实现了~ 原理就是根据一张噪声图的值是否大于某个阈值,来判断是否丢弃 ...
- (转)使用Cobbler批量部署Linux和Windows:Cobbler服务端部署(一)
原文:http://www.cnblogs.com/pluse/p/8316914.html http://blog.51cto.com/dreamway/1166589---------Cobble ...
- webpack查缺补漏
webpack是模块化打包工具,通过webpack,可以使得我们更加方便地组织代码.压缩.转译等等. 但是学习webpack也需要一定的成本,这里记录使用webpack许久以来一些模糊的知识点,方便以 ...
- npm全局安装和局部文件安装区别
全局安装往往是安装一个工具,他不是安装在一个文件夹下,而是安装在某个全局环境下,如目前我的安装路径是: C:\Users\cvter\AppData\Roaming\npm 在这里,我们可以看到所有全 ...
- java.lang.RuntimeException: HRegionServer Aborted的问题
进程情况 [hadoop@hadoop1 hbase]$ jps QuorumPeerMain ResourceManager HMaster NameNode JournalNode HRegion ...
- 改修jquery支持cmd规范的seajs
手动包装jquery1.10.2,firebug说$没有定义 define(function (require, exports, module) {//jquery源码module.exports= ...
- C 标准库 - string.h
C 标准库 - string.h This header file defines several functions to manipulate C strings and arrays. stri ...
- C 标准库 - string.h之strcat使用
strcat Appends a copy of the source string to the destination string. The terminating null character ...
- CentOS 升级 openSSH
openSSH作为linux远程连接工具,容易受到攻击,必须更新版本来解决,低版本有如下等漏洞: a. OpenSSH 远程代码执行漏洞(CVE-2016-10009) b. OpenSSH aut ...