两列布局中 左20% 右80% 为什么还能够换行? amazing

WilsonLiu95
  • 860

下面的代码中,当两个标签处于同一行则布局成功,当标签换行,则布局失败相应的也换行。当然如果我将其改成右79%左边20%则布局成功~求解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .left, .right, .bottom {
            height: 100px;
        }
        .left {
            width:20%;
            background: red;
        }
        .right {
            background: blue;
        }
        .bottom {
            background: yellow;
        }

        .left,.right {
            display:inline-block;
        }
        .right {
            width:80%;
        }
    </style>
</head>
<body>
<div class="main">
<div class="left">DIVA</div><div class="right">DIVB</div> //标签不换行,ok
</div>
<div class="bottom">DIVC</div>


<div class="main">
    <div class="left">DIVA</div>
    <div class="right">DIVB</div>  //标签换行 ,布局失败
</div>
<div class="bottom">DIVC</div>

</body>
</html>

回复
阅读 3k
3 个回答
✓ 已被采纳

这是display:inline-block的空白间隙问题

无名小贝勒
  • 5.7k

对如下格式的div设置display:inline-block;会产生div之间的空白间隙(换行符导致):

<div>content1</div>
<div>content2</div>

由于有空隙的存在,20%宽度+空隙宽度+80%宽度 > 100%宽度,造成第二个div另起一行布局。

<div>content1</div><div>content2</div>

上面代码的写法是消除空隙的其中一种方法,当然,还有其他方法。

空隙产生原因:HTML中的换行符、空格符、制表符等空白符,字体大小不为0的情况下,空白符占据一定宽度,使用inline-block会产生元素间的空隙。
解决方式供参考:
如何解决inline-block元素的空白间距
如何消除inline-block产生的元素间空隙

grey
  • 56

修正:去掉css样式.left,.right {display:inline-block;},得:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left, .right, .bottom {
            height: 100px;
        }
        .left {
            width:20%;
            background: red;
        }
        .right {
            background: blue;
        }
        .bottom {
            background: yellow;
        }
        .right {
            width:80%;
        }
    </style>
</head>
<body>
<div class="main">
<div class="left">DIVA</div><div class="right">DIVB</div>
</div>
<div class="bottom">DIVC</div>


<div class="main">
    <div class="left">DIVA</div>
    <div class="right">DIVB</div>
</div>
<div class="bottom">DIVC</div>

</body>
</html>

空白间隙的问题(●'◡'●)

宣传栏