如何使两个总宽度为 100% 的 div 适合屏幕答案

【问题标题】：How to make two divs of a total of 100% width fit in the screen如何使两个总宽度为 100% 的 div 适合屏幕
【发布时间】：2016-11-24 15:06:58
【问题描述】：

这里是a fiddle

我希望两个 div 并排占据窗口的所有宽度。我在它们上使用display:inline-block，以便它们水平运行。

<div id="left" class="horizontal">hello</div>
<div id="right" class="horizontal">world</div>

问题是，当我将它们的宽度设置为等于 100%（左侧为 20%，右侧为 80%）时，它们占用的空间比屏幕大，而右侧的 div 被推到另一个 div 之下。

我通过将宽度设置为小于 100%（19% 和 79%）来解决这个问题，但这会在以后出现一些小问题，有时会在我不想要的地方放置不需要的空间。

我缺少什么让我的 div 在使用 100% 的屏幕时水平排列？

我已经看到了here 和this question 中列出的技巧...其中大多数都非常丑陋，我仍然更喜欢使用小于 100% 的宽度。

* {
    padding:0;
    margin:0;
    border:0;
    border-spacing:0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
html {
    height:100%;
}
body {
    height:100%;
}
#left {
    background-color: red;
    width:20%;
    height:100%;
}
#right {
    background-color: green;
    width:80%;
    height:100%;
}
.horizontal {
    display: inline-block;
}

【问题讨论】：

就个人而言，我不会使用inline-block，而是使用block。将position: relative 和float: left 添加到.horizontal 就可以了...
How to remove the space between inline-block elements? 的可能副本
比利所说的是另一种方法，它不是你问题的答案，它没有解释原因。

标签： html css

【解决方案1】：

它与 display: inline-block 有关，它在项目之间添加少量像素。我也遇到过这个问题。

来自 [CSS-Tricks] (https://css-tricks.com/fighting-the-space-between-inline-block-elements/)

【讨论】：

没有一个很好的解决方案。我记得我最终没有对 div 使用 inline-block。您可以将它们显示为块、使用绝对定位或使用某种前端网格系统（bootstrap、foundation、bourbon/neat）
我真的不明白为什么前端网格的膨胀是一个更好的解决方案。
我使用了一些引导程序和一些波旁威士忌/整洁。我不是他们的超级粉丝，尤其是 bootstrap，因为它将样式重新放入标记中，但它们是处理这类事情的一种选择，并且非常受欢迎。

【解决方案2】：

如果您不一定需要使用inline-block，我建议您改用block。 block 是div 的display 的默认值，因此您不必显式设置它。只需将float 设置为left，您就不必“争夺内联块元素之间的空间”。

例子：

.horizontal {
  float: left;
}

【讨论】：