Question

在我的标题中，我只想在左侧的徽标和右侧的购物车图片之间放置一个电话号码。所以3个div的横向内容。

为此，我使用了带显示的div：内联块和徽标后的100px边距。我不得不在CSS中放一个@media，以便在它移动时稍微整理一下，因为大的余量会让它略微下降。

我知道是否可以通过位置更容易做到：相对和一些维度，这也意味着我不必添加更多@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解决此问题。我的示例中的每个column占33.3% width的{{1}}，左侧是row。我还确保floated clear，以便在页面的其余部分保持正确的布局。我制作的floats属性只是为了更好看。

＆＃13;

text-align

＆＃13;

.row:after {
  clear:both;
  content: '';
  display: table;
}

.column {
  float: left;
  width: 33.3%;
}

.phonenumber {
  text-align: center;
}

.cart {
  text-align: right;
}

＆＃13;

至于使用媒体查询，我个人倾向于坚持最常见的宽度，并留在那。

<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>

Answer 2

您可以使用表格布局。

display: table上的row和display: table-cell上的column，就是这样。无需插入边距，宽度和浮动。只要您的徽标和文字不是太大，就会自动响应。否则只需添加媒体查询即可处理。

小提琴：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>

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

2 个答案: