Question

我遇到的问题只是MAC Safari特有的。我的代码看起来像

<div class="wrapper" style="max-width:1220px">
 <div style="width:50%;display:inline-block">First</div>
 <div style="width:25%;display:inline-block">Second</div>
 <div style="width:25%;display:inline-block">Third</div>
</div>

在所有浏览器上，即使在Windows下的Safari上看起来也不错，但在Mac下，third DIV会回到下一行。有什么想法吗？

Answer 1

正如您在评论中所述，您的s显示为内联块。这意味着您的代码实际应用为：

<div class="wrapper">
    <div>First</div> <div>Second</div> <div>Third</div>
    <!-- Note that new lines are applied as whitespace -->
</div>

25％+ 25％+ 50％+ 空白＆gt; 100％

有一些解决方案，其中两个是：将所有<div>写在一行中，例如<div></div><div></div></div>，不要换行

或

只需使用float: left代替display: inline-block。

Answer 2

在任何浏p>

50% + 1 space character width + 25% + 1 space character width + 25%超过100％，因此预期第三个元素会突破到新行。

我建议您阅读css-tricks.com的Fighting the Space Between Inline Block Elements。

Answer 3

正如其他人已经提到的，空白可能会导致你的问题。

你能考虑一下flexbox吗？ Check support at can I use

这是fiddle

<div class="flex-container">
  <div id="one" class="flex-item">1</div>
  <div id="two" class="flex-item">2</div>
  <div id="three" class="flex-item">3</div>
</div>

.flex-container {
  padding: 0;
  margin: 0 auto;
  list-style: none;
  max-width:1220px;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.flex-item {
  height: 150px;
  margin-top: 10px;

  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

#one {
  background: pink; width: 50%;
}
#two {
  background: magenta; width: 25%;
}
#three {
  background: orange; width: 25%;
}

Mac Safari DIV的宽度比其他浏览器大

3 个答案: