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

Question

我想在标题中简单地在左侧徽标和右侧购物车图片之间放置一个电话号码。 因此3 div的水平内容。

为此，我在徽标后使用了带有display：inline-block和100px边距的div。 我不得不在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来解决。 在我的示例中，每一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您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>