随着屏幕尺寸的减小，让 div 正确对齐的问题

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 在这里：https://jsfiddle.net/4auh8zn5/2/

希望对你有帮助！