html - CSS 显示 :inline with margin vs position:relative

Question

在我的页眉中，我只想在左侧的 Logo 和右侧的购物车图片之间放置一个电话号码。所以水平内容的 3 个 div。

为此，我使用了带有 display:inline-block 的 div，并在 Logo 后留出了 100 像素的边距。我不得不在 CSS 中放置一个@media，以便在移动时稍微整理一下，因为大边距会稍微影响它。

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

所以对齐和定位水平内容 - 位置或边距/显示？

<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 来解决这个问题。我示例中的每个 列 都占据 行 的 33.3% 宽度，并且 float 到左侧。我还确保清除 float ，以便在页面的其余部分保持正确的布局。我设置的 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) {}