相邻显示两个div，每个div的宽度为50％ [英] Display two divs next to each other where each has a width of 50%

问题描述

我的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不再相邻显示...为什么?

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?

推荐答案

由于两件事

1. 边框大小，因此您需要将 box-sizing 更改为 border-box
2. 内联块元素上的空白

1. Border size so you need to change box-sizing to border-box
2. 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>

这篇关于相邻显示两个div，每个div的宽度为50％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！