Question

我已经在stackoverflow中搜索了其他解决方案，但遗憾的是没有找到运气。如果我的问题已经存在答案，那么我道歉，请将答案链接到我：）

无论如何我必须使用div但显示：inline-block;不管用。我希望他们紧挨着彼此而不使用浮动。我该如何实现这一目标？我一定在这里遗漏了一些东西..

这是jsfiddle - https://jsfiddle.net/frxme8z8/

先谢谢大家！

.context {
  box-sizing: border-box;
  width: 50%;
  padding: 10px;
  background: #72ED80;
  font-family: 'Source Sans Pro', sans-serif;
  display: inline-block;
  height: 200px
}

Answer 1

只需将.Canada宽度设置为49％

＆＃13;

.context

＆＃13;

.context {
  box-sizing: border-box;
  width: 49%;
  padding: 10px;
  background: #72ED80;
  font-family: 'Source Sans Pro', sans-serif;
  display: inline-block;
  height: 800px
}

＆＃13;

Answer 2

@imGaurav的回答是正确的。因为您已将大小设置为50％，所以间隙之间存在空间;）

所以只需将宽度设置为49％，一切都会正常工作：）

.context {
  box-sizing: border-box;
  width: 49%;
  padding: 10px;
  background: #72ED80;
  font-family: 'Source Sans Pro', sans-serif;
  display: inline-block;
  height: 800px
}

否则你可以改变你的填充为0px然后，你不再有它之间的差距;）

Answer 3

你的问题是空白。我看到你做到了with 50% - 10px ......正确的方法是50% - 8px实际上......或者如果你想要一个更干净的版本，只需删除你的html文件中的空格就像在我制作的这个小提琴中{{ 3}}

display：内联块无法正常工作。我如何使其工作？

3 个答案: