CSS布局方式--inline-block 布局
布局其实就是想办法怎样将一些元素横向的排列起来,纵向由于块级元素的存在会自动占据一行。
inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行,而且使用 inline-block 元素排列没有清除浮动这样的问题。
但是,使用 inline-block 布局两个元素之间会有一个空白间隙,下面一起来看一下。
html代码
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
css 代码
.container {
width: 800px;
height: 200px;
/*font-size: 0;*/
}
.left {
/*font-size: 14px;*/
background-color: red;
display: inline-block;
width: 200px;
height: 200px;
}
.right {
/*font-size: 14px;*/
background-color: blue;
display: inline-block;
width: 600px;
height: 200px;
}
结果如下:
按道理说,container 的宽度正好等于 left 和 right 的宽度之和,应该并列在一起,但是没有,现在我们减小一些 right 的宽度,将 right 的宽度设置为 500 px,结果如下
会发现中间有一个空白的间隙,这是为什么呢?
因为现在使用的是 inline-block 元素,为了方便理解,可以将 inline-block 元素看成是两个文字,文字与文字之间不可能是连在一起的,肯定是有间隙的。
既然知道了是文字的问题,那我们就将父元素 container 的字体大小设置为 0,可是这个时候会发现 left 和 right 这两个单词也没有了,这是因为 left 和 right 元素继承了父级元素的字体大小,这时候我们只需要分别设置 left 和 right 元素的字体大小即可。
将 css 代码修改如下
.container {
width: 800px;
height: 200px;
font-size: 0; /* 新增 */
}
.left {
font-size: 14px; /* 新增 */
background-color: red;
display: inline-block;
width: 200px;
height: 200px;
}
.right {
font-size: 14px; /* 新增 */
background-color: blue;
display: inline-block;
width: 600px;
height: 200px;
}
结果如下
上面是一种方法,下面可以从 html 代码的角度来解决这个问题。
引起上面间隙的根本原因是由于 left 元素和 right 元素代码之间不是紧挨着的导致中间有间隙,可以将 html 代码改成下面这样:
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
<!-- 或利用注释的方式 -->
<div class="container">
<div class="left">
left
</div><!--
--><div class="right">
right
</div>
</div>
结果如下
完,后续还会总结一下flex布局,float布局,table 表格布局等 CSS 布局方式。
如有不恰当之处,欢迎指正哦.
CSS布局方式--inline-block 布局的更多相关文章
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- css多种方式实现双飞翼布局
圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...
- 布局方式-inline-block布局
.像文本一样排block元素 .没有清除浮动等问题 .需要处理间隙 一种方式 <style> .container{ width: 800px; height: 200px; fo ...
- 移动 WEB 开发的布局方式 ---- 响应式布局
一.响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的 ...
- Android开发之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...
- H5 58-网页的布局方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android-基本控件和详解四种布局方式
转自:https://www.cnblogs.com/ludashi/p/4883915.html 一.常用基本控件 1.TextView 看到Android中的TextView, 我不禁的想到了iO ...
- CSS系列,三栏布局的四种方法
三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...
- 【Android UI】Android开发之View的几种布局方式及实践
引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...
- Android 开发之旅:view的几种布局方式及实践
本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weigh ...
随机推荐
- 11-1 css属性选择器
一 基础选择器 标签选择器:选择的标签的‘共性’,而不是特性 div{}.ul{}.ol{}.form{} 类选择器:.box{} id选择器:#box{} 只能选择器的特性,主要是为了js *通配符 ...
- 详解Python中内置的NotImplemented类型的用法
它是什么? ? 1 2 >>> type(NotImplemented) <type 'NotImplementedType'> NotImplemented 是Pyth ...
- 2019-1-29-Moq基础-判断方法被执行
title author date CreateTime categories Moq基础 判断方法被执行 lindexi 2019-01-29 16:29:57 +0800 2019-01-17 1 ...
- 从 Apache ORC 到 Apache Calcite | 2019大数据技术公开课第一季《技术人生专访》
摘要: 什么是Apache ORC开源项目?主流的开源列存格式ORC和Parquet有何区别?MaxCompute为什么选择ORC? 如何一步步成为committer和加入PMC的?在阿里和Uber总 ...
- js循环遍历数组(对象)
1,for循环 对于循环应该是最常用的一种遍历方式了,通常用来遍历数组结构. let arr = [a,b,d];for (let i=0; i<arr.length; i++){ consol ...
- 割点(tarjan)
对于根来说,如果它有超过1棵子树,那么它是一个割点 对于非叶结点来说,如果它的某一个儿子没有回边能到达高于它的点,那么它是一个割点 叶节点不是割点 //洛谷3388 #include<algor ...
- Fragment学习(二): 管理Fragment和Fragment通讯
一. 管理Fragment 首先,如果你想在Android3.0及以下版本使用Fragment,你必须引用android-support-v4.jar这个包 然后你写的activity不能再继承自Ac ...
- Python--day72--json内容回顾
前后端分离,Json格式字符串:序列化和反序列化 """ 复习python中的json模块 """ import json s = '{&q ...
- NLP进阶之(七)膨胀卷积神经网络
NLP进阶之(七)膨胀卷积神经网络1. Dilated Convolutions 膨胀卷积神经网络1.2 动态理解1.2.2 转置卷积动画1.2.3 理解2. Dilated Convolutions ...
- H3C RIPv2配置举例