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 ...
随机推荐
- LoadRunner11_录制Oracle数据库脚本
[oracle环境] ①oracle:无需在本地安装oracle,但是oracle的odbc驱动一定要装:(我的安装路径为 D:\oracle ).安装好后在环境变量 " Path &quo ...
- PHP的魔法方法
PHP将所有以__(两个下划线)开头的类方法保留为魔术方法.所以在定义方法是,除了魔术方法,建议不要用两个下划线前缀. 魔术方法(Magic methods)有 __construct(),__des ...
- 关于HTML学习整理(一)
新人,自己整理,第一次发,以后慢慢整理,欢迎指点,那些链接怎么做的,希望有人告知一下,谢谢! HTML页面写法,标签成对出现,可嵌套使用 <html> <head> <t ...
- iOS 转场动画探究(一)
什么是转场动画: 转场动画说的直接点就是你常见的界面跳转的时候看到的动画效果,我们比较常见的就是控制器之间的Push和Pop,还有Present和Dismiss的时候设置一下系统给我们的modalTr ...
- oracle 树形表结构查询 排序
oracle 树形表结构排序 select * from Table start with parentid is null connect by prior id=parentid order SI ...
- jquery让页面滚动条top,滚动条 顶部
jquery让页面滚动条top,滚动条 顶部$(document).scrollTop(0);
- Angular4 后台管理系统搭建(2) - flexgrid 单元格模板 wjFlexGridCellTemplate 的坑
这几天中了很多坑,尤其是两个大坑.先是运行环境的坑,在是flexgrid单元格内部模板的坑.这里记录下. 一开始我遇见一些很奇怪的问题,按网上的说法,别人这么写代码都正常,就在我机器上不正常.按以前的 ...
- 我的学习之路_第二十三章_HTML
Html : 超级文本语言 ( Hyper text Markup Language ) HTML 文件扩展名是 * .html HTML 结构都是有标签组成 通常情况下标签有开始标签和结束标签组成 ...
- Android如何实现定位获取
一:GPS定位: (1).要实用Adnroid平台的GPS设备,首先需要添加上权限,所以需要添加如下权限: uses-permission android:name= android.permissi ...
- Unity 游戏框架搭建 (二) 单例的模板
上一篇文章中说到的manager of managers,其中每个manager都是单例的实现,当然也可以使用静态类实现,但是相比于静态类的实现,单例的实现更为通用,可以适用大多数情况. 如何设计 ...