布局方式－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 ...
随机推荐
- css盒子居中
方法1(margin: 0 auto)<!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言，比如TypeScript
常用知识点,技巧 添加库到本地: (举例 element-ui) 用npm命令行把包下载到本地 在电脑里找到资源文件,比如 C:\Users\XiaoCong\AppData\Roaming\npm\ ...
- pat1015. Reversible Primes (20)
1015. Reversible Primes (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A r ...
- LeetCode 319 ——Bulb Switcher——————【数学技巧】
319. Bulb Switcher My Submissions QuestionEditorial Solution Total Accepted: 15915 Total Submissions ...
- CTPN_论文阅读总结
论文全名:Detecting Text in Natural Image with Connectionist Text Proposal Network 1.摘要 (1)本文提出新型网络CTPN,用 ...
- 继承Application管理生命周期
继承Application实现Android数据共享 http://www.jianshu.com/p/75a5c24174b2 jessyan提出一个思路,用Application + 接口来管理扩 ...
- 《Hadoop权威指南》读书笔记1
<Hadoop权威指南>读书笔记 Day1 第一章 1.MapReduce适合一次写入.多次读取数据的应用,关系型数据库则更适合持续更新的数据集. 2.MapReduce是一种线性的可伸缩 ...
- java应用程序已被安全设置阻止的解决办法（总有一个适合你）
1. 在1月底的一次Java自动更新升级后,我点开已经配置好的Java小程序,赫然看到如下错误: 在网上查找了很多资料,发现就是此次更新的问题,解决方法如下: 控制面板—>Java—>安全 ...
- Hadoop的安装与配置（虚拟机中的伪分布模式）
1引言 hadoop如今已经成为大数据处理中不可缺少的关键技术,在如今大数据爆炸的时代,hadoop给我们处理海量数据提供了强有力的技术支撑.因此,了解hadoop的原理与应用方法是必要的技术知识. ...
- SharedPreferences的封装
android.content.SharedPreferences是一个接口,用来获取和修改持久化存储的数据.有三种获取系统中保存的持久化数据的方式: 1). public SharedPrefere ...