Question

我的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;
}

A JSFiddle

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

Answer 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>

Answer 2

您需要删除<div>代码与box-sizing:border-box;之间的换行符这两个div是彼此相关的。

另一种方法是使用float

    #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;
    }

Answer 3

这是因为您已将1px的边框添加到wrapper。你的边框占你网页总宽度的2倍。

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

Answer 4

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

显示彼此相邻的两个div，每个div的宽度为50％

4 个答案: