Question

我在页面上显示一个信息栏，当以1278像素宽（我的macbook上的原生大小）查看时，该信息栏设置为全屏宽度的76％这个div必须居中，以便它直接位于旋转木马上方。信息栏包含三个div，每个div包含一个图标，然后包含一些文本。我遇到的问题是，随着屏幕宽度的减小，文本会降低到图标下方，而我希望整个内容的尺寸减小并保持整体间距，以便始终与下面的轮播对齐。一旦屏幕达到智能手机大小，它就会垂直堆叠信息栏。（媒体查询大小尚未设置，但此处使用的示例大小） HTML

<div id="info-bar">
<div id="container">
<div id="quickquotes" class="info">
<i class="icon-quote"></i>
<div class="text-area">
Quick Quote Fast Response</div>
</div>

<div id="delivery" class="info">
<i class="icon-delivery"></i>
<div class="text-area">
Free UK Delivery on Orders Over £100</div>
</div>

<div id="quickshop" class="info">
<i class="icon-quickshop"></i>
<div class="text-area">
Quick Shop Search Product Codes</div>
</div>
</div>
</div>

CSS

#info-bar{
background:#fff;
}
#container{
margin-right: auto;
margin-left: auto;
width:76%;
}
.info{
float:left;
width:38.5%;
margin:0;
padding: 9px 0;
font-size:0.4em;
}
#quickquotes.info{
width:30.5%;
}
#quickshop.info{
width:31%;
}
#container i {
font-size: 34px;
color: #a6d120;
display: inline-block;
vertical-align: middle;
}
.icon-quote:before {
content: url("http://dev.doorentrydirect.com/includes/templates/ded_responsive/images/info-quote.png");
}
.icon-delivery:before {
content: url("http://dev.doorentrydirect.com/includes/templates/ded_responsive/images/info-delivery.png");
}
.icon-quickshop:before {
content: url("http://dev.doorentrydirect.com/includes/templates/ded_responsive/images/info-quickshop.png");
}
#container .text-area {
display: inline-block;
vertical-align: middle;
text-align: left;
margin-left: 0px;
color:#1e3e57;
letter-spacing:0.07em;
font-weight:bolder;
text-transform:uppercase;
font-size:1.1em;
}
@media only screen and (max-width: 40em) {
  .info,#quickquotes.info,#quickshop.info {
  float:none;
  width:100%;
  margin-bottom:5px
  }
}

我已经设置了一个小提琴，显示当前使用的css和html代码。（注意，我必须添加比实际使用的字体小得多的字体，以便在jsfiddle上显示一行。

小提琴出现在https://jsfiddle.net/4auh8zn5/1/

Answer 1

您可以使用flexbox解决它：

将CSS中的.info更改为：

.info{
  float:left;
  width:38.5%;
  margin:0;
  padding: 9px 0;
  font-size:0.4em;
  display:flex;
  flex-wrap: nowrap;
  align-items: center;
}

如果您想更好地定位图标，还可以添加以下代码：

#container i:before {
  position:relative;
  top:4px;
}

jsfiddle here：https://jsfiddle.net/4auh8zn5/2/

希望它有所帮助！

当屏幕尺寸减小时，问题是正确对齐div

1 个答案: