CSS显示：内联与边距vs位置：相对

Question

在我的标题中，我希望在左侧的徽标和右侧的购物车图像之间简单地放置一个电话号码。所以水平内容的 3 个 div。

为此，我使用了一个带有 display:inline-block 的 div 和一个 100px 的徽标后边距。我不得不在 CSS 中添加一个@media，以便在它移动时稍微整理一下，因为大边距会稍微扔掉它。

我想知道使用 position:relative 和某些维度是否可以更轻松地完成相同的操作，这也意味着我不必添加太多 @media，因为边距不会将其丢弃。

那么对齐和定位水平内容 - Position or Margin/Display？

<div class="logo">
  <img src="mylogo.png">
  <div class="phonenumber">0111 111 111</div>
</div>

.phone{
  margin-left: 100px;
  font-size:26px;
  display:inline-block;
  vertical-align: middle;
}

Answer 1

我不知道100px margin 是否是强制性的，但您可以使用columns 解决这个问题。在我的示例中，每个column 占用row 的33.3% width，并且在左侧是floated。我还确保clear floats 以保持页面其余部分的正确布局。我制作的text-align 属性只是为了更好看。

.row:after {
  clear:both;
  content: '';
  display: table;
}

.column {
  float: left;
  width: 33.3%;
}

.phonenumber {
  text-align: center;
}

.cart {
  text-align: right;
}

<div class="row">
  <div class="column logo"><img src="mylogo.png"></div>
  <div class="column phonenumber">0111 111 111</div>
  <div class="column cart">blabla</div>
</div>

关于使用媒体查询，我个人倾向于坚持最常见的宽度并保持不变。

// Mobile
@media (max-width: 767px) {}
// Tablet portrait (iPad based)
@media (min-width: 768px) and (max-width: 991px) {}
// Tablet landscape (iPad based)
@media (min-width: 992px) and (max-width: 1024px) {}
// Desktop
@media (min-width: 1025px) {}

Answer 2

您可以只使用表格布局。

display: table 上的 row 和 display: table-cell 上的 columns，就是这样。无需干预边距、宽度和浮动。只要您的徽标和文字不太大，就会自动响应。否则只需添加一个媒体查询来处理它。

小提琴：http://jsfiddle.net/abhitalks/hu6o5jv4/1/

片段：

.row { display: table; width: 100%; margin-top: 32px; }
.column { display: table-cell; vertical-align: middle; }
.phonenumber { text-align: center; }
.cart { text-align: right; }

<div class="row">
  <div class="column logo"><img src="//placehold.it/72x48?text=logo"></div>
  <div class="column phonenumber">0111 111 111</div>
  <div class="column cart"><img src="//placehold.it/72x48?text=cart"></div>
</div>