在我的页眉中,我只想在左侧的 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;
}
最佳答案
我不知道 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) {}
关于html - CSS 显示 :inline with margin vs position:relative,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33262086/