不能将3个div一个接一个地与display：inline-block＆amp; amp;浮动：

Question

好的，所以我有3个div，每个div有3个图像（2个来自font-awesome和1个实际图像）和

。我希望它们能够对齐，但我不知道为什么最后一个没有按照我想要的方式对齐。

我试过漂浮：右边上.fa-dribbble和#football＆gt; p也是如此，但是文字不再适用于球。

我该怎么办？我应该使用职位吗？我担心之后会没有反应。

＆＃13;

＆＃13;

#central-about {
    margin: 0 auto;
    max-width: 1500px;
    margin-top: 11vw;
}

#dreamer {
    float: left;
    display: inline-block;
}

#dreamer > p {
    width: 40%;
    text-align: center;
}

.fa-cloud {
    margin-top: 32px;
    margin-left: 55px;
}

#gym {
    position: absolute;
    left: 45%;
    display: inline-block;
}

#gym > p {
    width: 30%;
    text-align: center;
}

#football {
    float: right;
    display: inline-block;
}

#football > p {
    width: 30%;
    text-align: center;
}

.fa-dribbble {
    margin-right: 55px;
}

＆＃13;

<div id="central-about">
           <div id="dreamer">
               <i class="fa fa-cloud fa-8x" aria-hidden="true"></i>
               <p>Definitely a dreamer. I see myself succesful in every situation. I don't fear failing, because I always aim high so I can progress.</p>
           </div>
           <div id="gym">
               <img src="img/dumbbell.png" alt="dumbbell" class="dumbbell" />
               <p>Addicted to working out. I started 2 years ago and I still love training my six pack and having a healthy life!</p>
           </div>
           <div id="football">
               <i class="fab fa-dribbble fa-8x" aria-hidden="true"></i>
               <p>I love to play football. I've played it my whole life, and I'm still doing it for a local team. As I'm young, I train hard and I know someday I will achieve what I want.</p>
           </div>
       </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用flexbox大大简化布局。 有一个很好的介绍here on CSS Tricks。

这是一个基本的例子：

＆＃13;

＆＃13;

#central-about {
  margin: 0 auto;
  max-width: 1500px;
  margin-top: 11vw;
  display: flex;
  justify-content: space-between;
  /* uncomment this line if you want the items to line up vertically
  align-items: baseline;
   */
}

#central-about div {
  text-align: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="central-about">
  <div id="dreamer">
    <i class="fa fa-cloud fa-8x" aria-hidden="true"></i>
    <p>Definitely a dreamer. I see myself succesful in every situation. I don't fear failing, because I always aim high so I can progress.</p>
  </div>
  <div id="gym">
    <img src="https://unsplash.it/150" alt="dumbbell" class="dumbbell" />
    <p>Addicted to working out. I started 2 years ago and I still love training my six pack and having a healthy life!</p>
  </div>
  <div id="football">
    <i class="fab fa-dribbble fa-8x" aria-hidden="true"></i>
    <p>I love to play football. I've played it my whole life, and I'm still doing it for a local team. As I'm young, I train hard and I know someday I will achieve what I want.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试display: inline-flex/flex

＆＃13;

＆＃13;

#central-about {
    margin: 0 auto;
    max-width: 1500px;
    margin-top: 11vw;
    display: inline-flex;
}



#dreamer > p {
    width: 40%;
    text-align: center;
}

.fa-cloud {
    margin-top: 32px;
    margin-left: 55px;
}



#gym > p {
    width: 30%;
    text-align: center;
}


#football > p {
    width: 30%;
    text-align: center;
}

.fa-dribbble {
    margin-right: 55px;
}

＆＃13;

<div id="central-about">
           <div id="dreamer">
               <i class="fa fa-cloud fa-8x" aria-hidden="true"></i>
               <p>Definitely a dreamer. I see myself succesful in every situation. I don't fear failing, because I always aim high so I can progress.</p>
           </div>
           <div id="gym">
               <img src="img/dumbbell.png" alt="dumbbell" class="dumbbell" />
               <p>Addicted to working out. I started 2 years ago and I still love training my six pack and having a healthy life!</p>
           </div>
           <div id="football">
               <i class="fab fa-dribbble fa-8x" aria-hidden="true"></i>
               <p>I love to play football. I've played it my whole life, and I'm still doing it for a local team. As I'm young, I train hard and I know someday I will achieve what I want.</p>
           </div>
       </div>

＆＃13;

＆＃13;

＆＃13;