Question

我有一个粉红色的容器，里面有2个div，红色和绿色并排放置显示：inline-block; css.i中的规则需要这两个div占据50％的宽度，以便它们显示为单个div。但是当我将宽度设置为50％时，绿色跳转到红色div以下。当我将宽度设置为49％时，它会跳到相同的但是我们之间存在差距，这不是我想要的，一些身体的帮助。

我需要他们坚持在一条线上，好像它们看起来像一个单独的div。我将我的代码笔链接放在这里...... http://codepen.io/ShamZ/pen/gLXBow HTML

<div class="container">
   <div class="box">
   </div> 
   <div class="box2">
   </div> 
</div>

CSS

.container{
width:800px;
height:800px;
background-color:pink;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
}
.box2{
display:inline-block;
width:50%;
height:50px;
background-color:green;
}

Answer 1

这是一个已知问题，inline-block元素之间的空白区域会导致边距出现。看看这个例子（已修复）

.container{
width:800px;
height:800px;
background-color:pink;
}
.box{
display:inline-block;
width:50%;
height:50px;
background-color:red;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.box:nth-of-type(2) {
  background-color: green;
  }

<div class="container">
   <div class="box">
   </div><div class="box">
   </div> 
</div>

Answer 2

切换到花车，ala http://codepen.io/davewallace/pen/aBVQLN

inline-block会导致奇怪的间距，可能需要进一步的解决方法。

使用浮动时，您可以简单地达到预期的效果，您可能需要研究在包裹浮动元素的容器上使用'clearfix'。

Answer 3

我们的代码的问题是HTML检测容器中的盒子元素之间的空白 - 因此，似乎容器中没有足够的空间用于宽度为50％的2个Div。 - 将它们设置为48％甚至更小，你会看到它们适合在一条线上。

一种解决方案可以是：

＆＃13;

.container{
  width:800px;
  height:800px;
  background-color:pink;
  display:inline-block;
font-size: 0;
}


.box{
  display:inline-block;
  width:50%;
  height:50px;
  background-color:red;
}
.box2{
  display:inline-block;
  width:50%;
  height:50px;
  background-color:green;
}

＆＃13;

<div class="container">
  <div class="box">
  </div> 
  <div class="box2">
  </div> 
</div>

＆＃13;

然后在子元素中设置另一个font-size

Answer 4

将font-size:0添加到父元素.container

＆＃13;

.container{
  width:800px;
  height:800px;
  background-color:pink;
  font-size:0;
}


.box{
  display:inline-block;
  width:50%;
  height:50px;
  background-color:red;
}
.box2{
  display:inline-block;
  width:50%;
  height:50px;
  background-color:green;
}

＆＃13;

<div class="container">
  <div class="box">
  </div> 
  <div class="box2">
  </div> 
</div>

＆＃13;

我需要将两个div并排放置，好像它们会显示为一个div

4 个答案: