.像文本一样排block元素
.没有清除浮动等问题
.需要处理间隙
 
 
一种方式
<style>

　　.container{

　　　　width: 800px;

　　　　height: 200px;

　　　　font-size: 0;

　　　　/**

　　　　* 使用inline-block，就相当于是文本，文字和文字之间肯定是有间隙的

　　　　* 不可能连在一起，不管是什么字体，所以这里要将文本设置为0

　　　　*/

　　}

　　.left{

　　　　font-size: 14px;

　　　　background: red;

　　　　display: inline-block;

　　　　width: 200px;

　　　　height: 200px;

　　}

　　.right{

　　　　font-size: 14px;

　　　　background: blue;

　　　　display: inline-block;

　　　　width: 600px;

　　　　height: 200px;

　　}

</style>

<body>

　　<div class="container">

　　　　<div class="left">左</div>

　　　　<div class="right">右</div>

　　</div>

</body>

另一种处理方式
观察间隙的来源，他其实来自于html标记语言的空白

如图，是这个间隙，一种写成这样

<div class="container">

　　<div class="left">左</div><div class="right">右</div>

</div>

另外一种写成这样

<div class="container">

　　<div class="left">左</div><!--

　　--><div class="right">右</div>

</div>

把标记语言的空白注释掉也是可以掉

但是因为这两种方式写起来都比较麻烦，所以一般还是使用字体的方式
＊ 缺陷：自适应的布局比较麻烦

布局方式－inline-block布局的更多相关文章

  1. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  2. 移动 WEB 开发的布局方式 ---- 响应式布局

    一.响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的 ...

  3. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  4. 【Android UI】Android开发之View的几种布局方式及实践

    引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...

  5. Android 开发之旅：view的几种布局方式及实践

    本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weigh ...

  6. Android 开发：view的几种布局方式及实践

    View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Tab ...

  7. 【转】Android开发学习笔记：5大布局方式详解

    Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...

  8. Android开发5大布局方式详解

    Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...

  9. 【Android开发学习笔记之一】5大布局方式详解

    Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...

随机推荐

  1. sql常用格式化函数及字符串函数

    一.常用格式化函数 1.日期转字符串 select to_char(current_timestamp, 'YYYY-MM-DD HH24:MI:SS') YYYY:年份 MM:月份号(01-12) ...

  2. 设置ibus为默认输入法

    /etc/profile  文件中编辑 export INPUT_METHOD="ibus"

  3. 最强json解析工具

    [原]http://blog.csdn.net/xiaoguomumu/article/details/75255629 感觉上面的链接所说,需要传一个T进去,也就是先要构造T,感觉麻烦 可以不这样做 ...

  4. ssh免密码登录快速配置方法

    环境需求: 两台Linux主机   A (192.168.3.101)和 B(192.168.3.102),如何使用主机 A 免密码登录 主机B ? 配置步骤: 首页登录主机 A ,在主机A上生成自己 ...

  5. [转] EF cannot be tracked because another instance of this type with the same key is already being tracked

    本文转自:http://stackoverflow.com/questions/6033638/an-object-with-the-same-key-already-exists-in-the-ob ...

  6. geth

    >geth --networkid 123 --dev --datadir "d:/blockchain/project/ethereum" --rpc --rpcaddr ...

  7. python的用户输入和while循环

    1.函数input()工作原理 函数input()让程序暂停运行,等待用户输入一些文本.获取用户输入后,Python将其存储在一个变量中,以方便你使用. (1)获取数值可以用 int()函数 (2)求 ...

  8. Linux 套接字编程 - TCP连接基础

    第五章的内容,实现一个echo服务器和对应的客户端,主要收获: 0. TCP socket编程主要基本步骤 1. SIGCHLD信号含义(子进程退出时向父进程发送,提醒父进程对其状态信息进行一个获取) ...

  9. JavaScript入门几个概念

    JavaScript入门几个概念 刚刚入门JavaScript的时候,搞懂DOM.BOM以及它们的对象document和window很有必要. DOM是为了操作文档出现的API,document是它的 ...

  10. angular-自定义模块

    <!DOCTYPE html><html lang="en" ng-app="app"><head> <script ...