Question

如果我在70％宽的div旁边创建一个30％宽的div，内联块，它们不会水平排列。我必须使它们加起来不到100％

HTML

<div id="wrapper">
  <div id="w30">  
    width 30%
  </div>
  <div id="w70">  
    width 70%
  </div>
</div>

CSS

#wrapper{
  width:100%;
}
#w30{
  background:yellow;
  display:inline-block;
  width:30%;
}

#w70{
  background:pink;
  display:inline-block;
  width:70%;
}

jsfiddle

为什么30％+ 70％似乎比100％更宽？

Answer 1

您正在使用inline-block calculates white spaces too。因此，要么将div元素放在同一行，要么使用现代化的内容，例如flexbox。

使用inline-block（与您相同的CSS并立即使用）：

<div id="wrapper">
  <div id="w30">  
    width 30%
  </div><div id="w70">  
    width 70%
  </div>
</div>

使用flexbox（与您现在使用的HTML相同）：

＆＃13;

#wrapper{
  display:flex;
  width:100%;
}
#w30{
  background:yellow;
  width:30%;
}

#w70{
  background:pink;
  width:70%;
}

＆＃13;

<div id="wrapper">
  <div id="w30">  
    width 30%
  </div>
  <div id="w70">  
    width 70%
  </div>
</div>

＆＃13;

为什么我不能在70％宽的div旁边放一个30％宽的div并让它们都内联？

1 个答案: