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

My HTML

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

My 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

So, when as you can see the width of each div is 49%, that's the only way I'm getting it to work. If you set the width of each to 50%, the divs aren't displayed next to each other anymore... Why is that?

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

5 个解决方案

#1

Because of two things

因为有两件事

Border size so you need to change box-sizing to border-box

边框大小,因此您需要将框大小更改为边框

White space on inline-block elements

内联块元素上的空白区域

* {
  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

You need to remove the line break between the <div> tags and box-sizing:border-box; The two divs arenext to each other.

你需要删除

标签和box-sizing:border-box之间的换行符;这两个div是彼此相关的。

Another approach would be to use float

另一种方法是使用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;
    }

#3

The other option is to use Flex.

另一种选择是使用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

This is because you have added a border of 1px to wrapper. Your border with take 2px of total width of your page.

这是因为您为包装器添加了1px的边框。你的边框占你网页总宽度的2px。

If you wanna keep the border and still keep the width of each div as 50%, you can refer to @NenadVracar 's answer

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

#5

Another option is to use calc() and calculate the width to be 50% - 2px. I'm just listing that as an option @Nenad Vracar has the right answer

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

#1