开发者社区> 问答> 正文

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

下面的代码中,当两个标签处于同一行则布局成功,当标签换行,则布局失败相应的也换行。当然如果我将其改成右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>

展开
收起
杨冬芳 2016-06-08 09:43:49 2295 0
1 条回答
写回答
取消 提交回答
  • 会有空白占用空间导致换行,可以考虑使用 flex 或者 grid 布局

    2020-03-28 21:50:16
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载