html - 在父级中并排获取 div？

Question

我正在尝试在包装器 div 中添加 2 个选项卡，但无法让它们并排放置，每个选项卡占用宽度的一半。我为每个人添加了以下 css:

width: 50%;
height: 100%;
display: inline-block;

出于某种原因，它们一直出现在彼此下方而不是彼此相邻。

我做了一个 JsFiddle 来展示发生了什么:http://jsfiddle.net/5zLoyc7q/1/

谁能帮我弄到它们，这样它们就可以像普通标签一样并排放置？

Answer 1

为什么不 float ？确保您的 box-sizing 是 border-box。下一页:

<div class="wrapper">
  <div>Hello world</div>
  <div>Guten Tag</div>
</div>

CSS:

.wrapper {
  overflow:auto;
}
.wrapper > div {
  float:left;
  width: 50%;
}    

display:inline-block 在元素右侧添加 1px 的空白。此外，如果您没有显示为边框框，您的框模型可能会遇到问题，换句话说，您的 50% 不是您认为的那样。

更新的 fiddle :http://jsfiddle.net/5zLoyc7q/2/确保清除 float 。