容器被推倒

Question

我有这个问题，当我在每个容器中创建新内容时，它旁边的那个被推下来导致它与我的页面一起搞定

＆＃13;

＆＃13;

.about {
  margin-left: 85px;
  margin-top: 20px;
}

#fastdel {
  color: #ffcc00;
  text-align: center;
}

#dollar {
  color: #ffcc00;
  text-align: center;
}

#code {
  color: #ffcc00;
  text-align: center;
}

＆＃13;

<h1 id="whybuy">WHY BUY FROM US</h1>
<div id="largebox">
  <div id="box1">
    <img src="images/code.png" class="about">
    <h1 id="code">High Quality Accounts</h1>
    <div id="box2">
      <img src="images/dollar.png" class="about">
      <h1 id="dollar">Low Prices</h1>
      <div id="box3">
        <img src="images/clock.png" class="about">
        <h1 id="fastdel">Fast Delivery</h1>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsfiddle：https://jsfiddle.net/8w09v5Lp/

Answer 1

首先修复你的html，你的标签没有正确关闭 其次，停止在任何地方使用id。

.about {
  margin-left: 85px;
  margin-top: 20px;
}

.box{
  display:inline-block;
}
#fastdel {
  color: #ffcc00;
  text-align: center;
}

#dollar {
  color: #ffcc00;
  text-align: center;
}

#code {
  color: #ffcc00;
  text-align: center;
}

<h1 id="whybuy">WHY BUY FROM US</h1>
<div id="largebox">
  <div class="box">
    <img src="images/code.png" class="about">
    <h1 id="code">High Quality Accounts</h1> 
  </div>
  <div class="box">
      <img src="images/dollar.png" class="about">
      <h1 id="dollar">Low Prices</h1>
  </div>
  <div class="box">
        <img src="images/clock.png" class="about">
        <h1 id="fastdel">Fast Delivery</h1>
      </div>
    </div>
  </div>
</div>