布局方式－inline-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>
如图，是这个间隙，一种写成这样
<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布局的更多相关文章
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- 移动 WEB 开发的布局方式 ---- 响应式布局
一.响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的 ...
- Android开发之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...
- 【Android UI】Android开发之View的几种布局方式及实践
引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...
- Android 开发之旅：view的几种布局方式及实践
本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weigh ...
- Android 开发：view的几种布局方式及实践
View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Tab ...
- 【转】Android开发学习笔记：5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
- Android开发5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
- 【Android开发学习笔记之一】5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
随机推荐
- html自定义垂直导航菜单（多级导航菜单，去掉font-awesome图标，添加自己的箭头图标）
这次在原先html自定义垂直导航菜单的基础上做了比较大的改动: 1.去掉了font-awesome图标,上级菜单右边的箭头是自己用css写的,具体参考<css三角箭头>. 2.去掉了初始化 ...
- TCP协议：三次握手过程详解
本文通过图来梳理TCP-IP协议相关知识.TCP通信过程包括三个步骤:建立TCP连接通道,传输数据,断开TCP连接通道.如图1所示,给出了TCP通信过程的示意图. 上图主要包括三部分:建立连接.传输数 ...
- string查找字符（串）
在C语言中 strchr 和 strstr函数都被包含在<string.h>头文件中,也就是要调用它们时要在程序前面包含<string.h>头文件,也就是写这个语句:#incl ...
- spark ALS 推荐算法参数说明
- (转)Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解
原文:http://blog.51cto.com/freeloda/1288553 大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负载均衡 六.Ng ...
- Where Should an Architect Begin?--reference
http://www.bitnative.com/2014/01/24/where-should-a-software-architect-begin/ Where Should an Archite ...
- flask在centos下搭建web服务【uwsgi，nginx】
centos操作系统 uWSGI是一个web服务器,Nginx进行反向代理的其实跟这些服务器可以说没有任何关系,你提供动态内容的服务器可以是apache/nginx/tomcat,当然也可以是uWSG ...
- IntelliJ IDEA 12 设置优化
1.IntelliJ IDEA简介 IntelliJ IDEA是Eclipse之外又一强大的IDE,Google在今年发布了新的Android开发IDE---Android Studio就是基于Int ...
- 【转载】win7mysql5.7.18免安装配置教程
闲着没事,装个mysql试试,小编以前都是用的linux,感觉mysql安装就是傻瓜式操作啊,第一次在windows系统上装,感觉出了很多问题,现在将整个过程分享给大家,希望大家在安装的时候少走弯路. ...
- 【Android】1.0 安卓生猛上手
1.Android操作系统,由安迪鲁宾发明,原发明用于照相机操作系统,市场反应惨淡,需求不足,后2005年被谷歌收购,用于智能手机操作系统. 2.logo来源:设计师上厕所看到男女厕所区别标志联想创作 ...