问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
WilsonLiu95
    86031217

    下面的代码中，当两个标签处于同一行则布局成功，当标签换行，则布局失败相应的也换行。当然如果我将其改成右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>
    css
    阅读 4k
    3 个回答
    得票最新
    头像
    imfeng
      1.5k7814
      ✓ 已被采纳

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

      头像
      无名小贝勒
        5.7k166280

        对如下格式的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
          5624

          修正：去掉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>

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

          查看全部 3 个回答
          推荐问题