布局方式－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 ...
随机推荐
- mysql 查询 TOP N 问题
Q:有一个学生成绩表,表名 stu(学生表),字段有:id(主键),name(学生姓名),subject(学科),score(分数) 1.查询该表中,所有科目都及格的学生 ; 说明:都及格的话,就是最 ...
- spark第七篇：Spark SQL, DataFrame and Dataset Guide
预览 Spark SQL是用来处理结构化数据的Spark模块.有几种与Spark SQL进行交互的方式,包括SQL和Dataset API. 本指南中的所有例子都可以在spark-shell,pysp ...
- sql server 远程备份 bak 删除
前言: 管理一个公司的一个服务器,最近有一些维护SQLserver数据库活弄,写下防止忘了. 因为公司采用SQL\Redis\MongoDB共用,SQL用来存储基础的结构\权限\等一些杂七杂八的东西. ...
- 【计算机网络】SSL交互和握手过程
SSL消息按如下顺序发送: 1.Client Hello 客户发送服务器信息,包括它所支持的密码组.密码组中有密码算法和钥匙大小: 2.Server Hello 服务器选择客户和服务器都支持的密 ...
- MySQL查询长数据是无值返回(可以尝试换行符)
如,要在数据库中包含这样数据的记录有多少条: <table class="link-more-blue" style="width: 100%;" bor ...
- WPF - MVVM 之TreeView
在项目中使用OnPropertyChanged方法,最简单的实例: private event PropertyChangedEventHandler PropertyChanged; protect ...
- initBinder转换日期格式
@Controller public class FirstController { @RequestMapping("/first") //类型转化工作一定是在真正的handle ...
- mysql二：库操作
一.系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等 performance_schema: My ...
- MySQL远程连接：Host 'x' is not allowed to connect to this MySQL server
远程连接MySQL时发现如下错误: java.sql.SQLException: null, message from server: "Host '192.168.30.23' is no ...
- android drag
1.Android:Drag and Drop的应用 2.Android 用户界面---拖放(Drag and Drop)(三) 3.Android 用户界面---拖放(Drag and Drop)( ...