集装箱被按下

html
css

2017-05-08 75 views 0 likes

我有这样的问题，即当我创建每个容器中的一个在它旁边新的内容被下推导致它与我的页面集装箱被按下

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

来源

2017-05-08 Tom

您提供的不匹配截图https://codepen.io/anon/pen/dWJvrL看到了如何创建代码[MCVE] –

为什么你每次嵌套DIV里面的前一个？ – Blazemonger

回答

首先修复你的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>

来源

2017-05-08 20:55:04 funkysoul

集装箱被按下

回答

相关问题