布局方式－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 ...
随机推荐
- 利用Flume将本地文件数据中收集到HDFS
1. 创建文件 放入一个txt文件 然后查看hdfs上的文件夹 不知道为什么并没有出现本地的文件 也不报错 后来发现,没有在logs文件夹下面,在newlogs文件夹下面
- DataX 安装和使用
阿里云介绍: 1. 下载安装包.作为阿里主要的数据传输工具Datax,阿里已经完全开源到github上面了.下载地址(https://github.com/alibaba/DataX). 2. 安装环 ...
- 轻量级ORM框架：Dapper中的一些复杂操作和inner join应该注意的坑
上一篇博文中我们快速的介绍了dapper的一些基本CURD操作,也是我们manipulate db不可或缺的最小单元,这一篇我们介绍下相对复杂 一点的操作,源码分析暂时就不在这里介绍了. 一:tabl ...
- (转)DB2 restart database命令的作用总结
DB2 restart database命令的作用总结 原文:https://blog.csdn.net/qingsong3333/article/details/62049039 信息中心对于RES ...
- C++ Memory System Part1: new和delete
在深入探索自定义内存系统之前,我们需要了解一些基础的背景知识,这些知识点是我们接下来自定义内存系统的基础.所以第一部分,让我们来一起深入了解一下C++的new和delete家族,这其中有很多令人吃惊的 ...
- Find command usage in Linux with excellent examples--reference
http://www.coolcoder.in/2014/02/find-command-usage-in-linux-with.html find searches the directory tr ...
- keepalive学习之软件设计
软件架构如下图所示: Keepalived 完全使用标准的ANSI/ISO C写出. 该软件主要围绕一个中央I/O复用分发器而设计,这个I/O复用分发器提供网络实时功能. 主要设计目标着重于从所有的模 ...
- 从XCodeGhost事件看软件来源鉴别的重要性
事件 事件引爆于9月18日乌云网公布的一则分析报告:"XCode编译器里有鬼 – XCodeGhost样本分析",这份纯粹的技术分析报告引发中国iOS生态链的众多开发者的关注. 引 ...
- 【Linux】linux文件夹打包命令
.tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ---------------------- ...
- 深入理解JavaScript系列（10）：JavaScript核心（晋级高手必读篇）
本篇是ECMA-262-3 in detail系列的一个概述(本人后续会翻译整理这些文章到本系列(第11-19章).每个章节都有一个更详细的内容链接,你可以继续读一下每个章节对应的详细内容链接进行更深 ...