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

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

我们先来看一下效果：

<!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 两个行内块元素，宽度相加刚好等于父盒子容器的元素，但第二个元素掉在第二行解决办法

最新文章

热门文章