显示两个相邻的 div，每个 div 的宽度为 50%答案

【问题标题】：Display two divs next to each other where each has a width of 50%显示两个相邻的 div，每个 div 的宽度为 50%
【发布时间】：2016-04-13 13:54:09
【问题描述】：

我的 HTML

<div id="wrapper">
    <div id="div1">The two divs are</div>
    <div id="div2">next to each other.</div>
</div>

我的 CSS

#wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:49%;
    height:120px;
    border: 1px solid red;
}
#div2 {
    display: inline-block;
    width:49%;
    height:160px;
    border: 1px solid green;
}

一个JSFiddle

所以，当您看到每个 div 的宽度为 49% 时，这是我让它工作的唯一方法。如果将每个的宽度设置为 50%，则 div 将不再彼此相邻显示...这是为什么呢？

【问题讨论】：

这是因为你的每边都有 1 px 的边框。然后盒子模型使 div 50% 宽 + 每边 2px，2px 是你的问题
Two inline-block elements, each 50% wide, do not fit side by side in a single row的可能重复
这个问题在这里已经回答了很多次了

标签： html css

【解决方案1】：

因为两件事

边框大小，所以您需要将box-sizing 更改为border-box
inline-block 元素上的空格

* {
  box-sizing: border-box;
}
#wrapper {
  border: 1px solid blue;
}
#div1 {
  display: inline-block;
  width: 50%;
  height: 120px;
  border: 1px solid red;
}
#div2 {
  display: inline-block;
  width: 50%;
  height: 160px;
  border: 1px solid green;
}

<div id="wrapper">
  <div id="div1">The two divs are</div><div id="div2">next to each other.</div>
</div>

【讨论】：

【解决方案2】：

您需要删除<div> 标记和box-sizing:border-box; 之间的换行符两个 div 彼此相邻。

另一种方法是使用浮动

    #wrapper {
        border: 1px solid blue;box-sizing:border-box;
    }
    #div1 {
        float:left;
        width:50%;
        height:120px;
        background:green;
box-sizing:border-box;
border:1px solid #909090;
    }
    #div2 {
        float:left;
        width:50%;
        height:160px;
        background:green;
box-sizing:border-box;
border:1px solid #909090;
    }

【讨论】：

【解决方案3】：

另一种选择是使用 Flex。

#wrapper {
    border: 1px solid blue;
    display: flex;
}
#div1 {
    width:50%;
    height:120px;
    border: 1px solid red;
}
#div2 {
    width:50%;
    height:160px;
    border: 1px solid green;
}

【讨论】：

【解决方案4】：

这是因为您在wrapper 中添加了1px 的边框。您的边框占页面总宽度的 2px。

如果你想保留边框，仍然保持每个 div 的宽度为 50%，你可以参考@NenadVracar 的回答

【讨论】：

【解决方案5】：

另一种选择是使用calc() 并将宽度计算为50% - 2px。我只是将其列为一个选项@Nenad Vracar 有正确的答案

【讨论】：