集裝箱被按下

Question

我有這樣的問題，即當我創建每個容器中的一個在它旁邊新的內容被下推導致它與我的頁面

.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; 
 
}

<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>

螺絲

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>