我们可以发现：两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行，这是什么问题呢？

我们先来看一下效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .container{

            width: 1024px;

            height: 1000px;

            margin: 0 auto;

            /*font-size: 0;*/加上过后就能解决为啥行内块元素却不在一行

        }

        .container div{

            display: inline-block;

        }

        .left{

            width: 80%;

            height: 100%;

            background-color: #0086b3;

        }

        .right{

            width: 20%;

            height: 100%;

            background-color: pink;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="left"></div>

    <div class="right"></div>

</div>

</body>

</html>

效果图：

我们可以看到这两个行内块元素并不在一行，这个原因其实就是，两个div之间存在换行，会把它看成一个空格，如果两个div之间不换行，或者在容器里添加font-size=0就能

解决问题，就是让中间的换行不占位置。

加上过后就会产生理想的效果：

CSS 两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行解决办法的更多相关文章

  1. CSS(3)---块级标签、行内标签、行内块标签

    块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

  2. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  3. css——行内元素和块级元素的具体区别与行内块元素

    (学习笔记) 行内元素(inline)和块级元素(block)都是display属性的值.要知道行内元素和块级元素的区别,首先要了解他们的特性. 行内元素的特性:“行内”,顾名思义,在一行之内,所以相 ...

  4. CSS行内块元素(内联元素)

    一.典型代表 input img 二.特点: 在一行上显示 可以设置宽高 <style type="text/css"> img{ width: 300px; /* 顶 ...

  5. CSS的布局之文档流，与行内/块级元素的延伸

    文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> ...

  6. CSS中的块级元素，行内元素，行内块元素

    博客转载于:https://blog.csdn.net/swebin/article/details/90405950 块级元素 block 块级元素,该元素呈现块状,所以他有自己的宽度和高度,也就是 ...

  7. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  8. css块级标签，行内标签，行内块标签的转换（2）

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  9. 解决行内块元素（inline-block）之间的空格或空白问题

    一.问题产生 由于html代码格式化后,标签会缩进或者换行.由于浏览器默认处理导致元素在页面显示中出现单个空格问题,尤其在行内或者行内块元素布局时影响比较明显 例如: 代码 页面显示 二.解决方案 这 ...

随机推荐

  1. QT中自定义系统托盘的实现—c++语言为例

    将要介绍的是:QT中自定义系统托盘(systemtray)的一个Demo,希望能帮需要的读者快速上手. 前提假设是诸位已经知道QT中的signals .slot以及资源文件,所以关于这些不会再累述. ...

  2. [C++] Pure Virtual Function and Abstract Class

    Pure Virtual Function Abstract Class

  3. Auto Encoder

    对自编码器的理解: 对于给定的原始输入x,让网络自动找到一种编码方式(特征提取,原始数据的另一种表达),使其解码后的输出x'尽可能复现原始输入x. 知乎参考:https://www.zhihu.com ...

  4. Golang 之 Base62 编码

    Base62 编码用62个可见字符来编码信息,也就是所谓的62进制,可用于缩短地址之类的.实现起来也很简单.当然,这个实现跟别人家的有可能不一样,反正自己能编能解就行. package main im ...

  5. Perl 学习笔记－标量数据

    最近学习Perl, 准备看一遍入门指南,关键的东西还是记录下来,以便以后复习和查看参考． 笔记来自<<Perl语言入门第5版>> 1. 在Perl内部,不区分整数值和浮点数值, ...

  6. Python3+Apache+Django+CentOS

    使用django开发的项目上到正式环境的环境搭建,系统软件版本: CentOS6. setuptools-.tar.gz pip-.tar.gz Python-.tgz pcre-8.39.tar.b ...

  7. CodeForces 682B Alyona and Mex (题意水题)

    题意:给定一个序列,你可以对这里面的数用小于它的数来代替,最后让你求,改完后的最大的序列中缺少的最小的数. 析:这个题,读了两个多小时也没读懂,要是读懂了,肯定能做出来...没什么可说的,就是尽量凑1 ...

  8. numpy.convolve()

    卷积函数: numpy.convolve(a, v, mode='full') Parameters: a : (N,) array_like First one-dimensional input ...

  9. 利用APT实现Android编译时注解

    摘要: 一.APT概述 我们在前面的java注解详解一文中已经讲过,可以在运行时利用反射机制运行处理注解.其实,我们还可以在编译时处理注解,这就是不得不说官方为我们提供的注解处理工具APT (Anno ...

  10. ThinkJS 中的Logic层

    第一个为什么需要Logic层: 当在 Action 里处理用户的请求时,经常要先获取用户提交过来的数据,然后对其校验,如果校验没问题后才能进行后续的操作:当参数校验完成后,有时候还要进行权限判断等,这 ...