一、使用float实现横列布局的方法

如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行

div1 div2

实现下面图片中布局的css样式如下:

分析:

1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下:

 <section class="active_div1">
<div>
<img id="active_div11" src="">
</div>
<div>
<img id="active_div12" src="">
</div>
<div>
<img id="active_div13" src="">
</div>
</section>
.active_div1 div {
float: left;
width: 33.33%;
box-sizing: border-box;
} .active_div1 div:nth-child(1) {
padding-left: 10px;
} .active_div1 div:nth-child(3) {
padding-right: 10px;
} .active_div1 div:nth-child(2) {
padding: 0 5px;
}

2、第二行只有中间图片的最有边距是5px;布局如下:

<section class="active_div2">
<div>
<img id="active_div21" src="" onclick="imgClick(this)">
</div>
<div>
<img id="active_div22" src="" onclick="imgClick(this)">
</div>
<div>
<img id="active_div23" src="" onclick="imgClick(this)">
</div>
</section>
.active_div2 div {
width: 33.33%;
float: left;
box-sizing: border-box;
} .active_div2 div:nth-child(2) {
padding: 0px 5px;
}

注意:使用box-sizing: border-box后如果没有其他样式,所有的块将全部贴在一起,中间是没有任何间距的。这也是一个很经典的布局

二、使用display:inline-block

display:inline-block大多数用于行块的转换,不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

红框中的布局就是使用display:inline-block最经典的布局。

<header id="consume_h">
<span>已过期为消费不退款</span>
<span>免预约</span>
</header>
.consume_h  span {
display: inline-block;
} .consume_h span:before {
content: "\f120";
display: inline-block;
margin-right: 5px;
margin-left: 10px;
font-family: "Ionicons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height:;
-webkit-font-smoothing: antialiased;
}

此处使用了伪类,关于伪类的定义是使用后面会有专门的笔记来记录,这里就不赘述了。

此出还有一个经典的布局:

这种布局一般是:
<div>
<img src="" alt="">
<p>
测试勿拍
</p>
</div>

使用定位position:absolute常用于左边固定,右边自适应的情况。

  1. 对div进行相对定位
  2. 对img进行绝对定位
  3. p进行相对定位
注:固定宽度列的高度>自适应宽度列?

三、使用flexible box实现 真正意义上的流体布局

这种方法本人还没有真正在实际操作中体验过,此处先记录下来~

CSS实现横列布局的方法总结的更多相关文章

  1. 一、CSS实现横列布局的方法总结

    一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...

  2. 【css】css2实现两列三列布局的方法

    前言 对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题.楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要 ...

  3. css实现三列布局,左右固定值,中间自适应。

    这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...

  4. CSS实现三列布局

    三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...

  5. CSS实现两列布局,一列固定宽度,一列宽度自适应方法

    不管是左是右,反正就是一边宽度固定,一边宽度自适应. 博客园的很多主题也是这样设计的,我的博客也是右侧固定宽度,左侧自适应屏幕的布局方式. html代码: <div id="wrap& ...

  6. CSS实现三列布局方法总结

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl

  7. HTML5+CSS实现三列布局自适应

    利用CSS的float属性可以将元素并排,做出三列并排的布局. 如这样的效果 实现的原理:只要将3个元素设置float属性,属性值为left,同时指定不同比例的宽度,及高度. 下面是实现代码 < ...

  8. CSS 经典三列布局

    一 圣杯布局 1 html结构 <!DOCTYPE html> <html> <head> <title></title> <link ...

  9. 纯CSS实现三列布局(两边固定,中间自适应)

    看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.== 看代码: html: <div class="top&qu ...

随机推荐

  1. LoadRunner11_录制Oracle数据库脚本

    [oracle环境] ①oracle:无需在本地安装oracle,但是oracle的odbc驱动一定要装:(我的安装路径为 D:\oracle ).安装好后在环境变量 " Path &quo ...

  2. PHP的魔法方法

    PHP将所有以__(两个下划线)开头的类方法保留为魔术方法.所以在定义方法是,除了魔术方法,建议不要用两个下划线前缀. 魔术方法(Magic methods)有 __construct(),__des ...

  3. 关于HTML学习整理(一)

    新人,自己整理,第一次发,以后慢慢整理,欢迎指点,那些链接怎么做的,希望有人告知一下,谢谢! HTML页面写法,标签成对出现,可嵌套使用 <html> <head> <t ...

  4. iOS 转场动画探究(一)

    什么是转场动画: 转场动画说的直接点就是你常见的界面跳转的时候看到的动画效果,我们比较常见的就是控制器之间的Push和Pop,还有Present和Dismiss的时候设置一下系统给我们的modalTr ...

  5. oracle 树形表结构查询 排序

    oracle 树形表结构排序 select * from Table start with parentid is null connect by prior id=parentid order SI ...

  6. jquery让页面滚动条top,滚动条 顶部

    jquery让页面滚动条top,滚动条 顶部$(document).scrollTop(0);

  7. Angular4 后台管理系统搭建(2) - flexgrid 单元格模板 wjFlexGridCellTemplate 的坑

    这几天中了很多坑,尤其是两个大坑.先是运行环境的坑,在是flexgrid单元格内部模板的坑.这里记录下. 一开始我遇见一些很奇怪的问题,按网上的说法,别人这么写代码都正常,就在我机器上不正常.按以前的 ...

  8. 我的学习之路_第二十三章_HTML

    Html : 超级文本语言 ( Hyper text Markup Language ) HTML 文件扩展名是 * .html HTML 结构都是有标签组成 通常情况下标签有开始标签和结束标签组成 ...

  9. Android如何实现定位获取

    一:GPS定位: (1).要实用Adnroid平台的GPS设备,首先需要添加上权限,所以需要添加如下权限: uses-permission android:name= android.permissi ...

  10. Unity 游戏框架搭建 (二) 单例的模板

      上一篇文章中说到的manager of managers,其中每个manager都是单例的实现,当然也可以使用静态类实现,但是相比于静态类的实现,单例的实现更为通用,可以适用大多数情况. 如何设计 ...