html - 如何使用css和html连续放置三个div

Question

我想使用 div 和 css 在 html 页面上连续放置 3 个图像和连续放置 3 个图像。我可以连续放置 3 张图片，但无法让其他图片在下方连续显示，我做错了什么？

这是我的html

  <div id="ballons">

       <img src="ballons.png" alt="ballons"/>
       <br>
       <center><a href="">Ballons</a></center>


     </div>

     <div id="cake">

        <img src="cake.png" alt="cake"/>

        <br>
       <center><a href="">Cake</a></center>

      </div>

      <div id ="candles">

        <img src="candles.png" alt="candles"/>

          <br>
       <cnter><a href="">Candles</a></center>

      </div>


      <div id ="bag">

        <img src="bag.png" alt="party bag"/>

<br>
            <center><a href="">Party Bag</a></center>

      </div>

<div id ="boncey">
        <img src="boncey.png" alt="boncey castle"/>

<br>
            <center><a href="">Boncey Castle</a></center>

      </div>

<div id="paper">
          <img src="paper.png" alt="paper plate"/>


<br>
            <center><a href="">Papaer Plates and Cup</a></center>


      </div>

这是我的CSS

#ballons
{

    padding-top: 60px;
    width: 200px;
    float: left;
    padding-left: 150px;
    float: left;
     }

#cake
{
    padding-top: 60px;
    float: left;
    width: 250px;


}

#candles

{
    padding-top: 60px;
    width: 200px;
    float: left;

}

#bag
{
    padding-top: 80px;
    width: 200px;
    padding-left: 150px;
     position: relative;
 }

#boncey
{
    padding-top: 60px;

    width: 250px;
     position: relative;
    }

#paper
{
    padding-top: 600px;
    width: 200px;
    float: left;
}

Answer 1

尝试这样的事情。您必须根据要执行的操作调整宽度、高度等，但这可以让您了解如何将元素排成一行，在这种情况下，照片位于标题上方。它也很容易适应响应。

jsfiddle

    <div class="row">
    <div class="rowitem">
        <img src="ballons.png" alt="ballons"/>
        <span><a href="">Ballons</a></span>        
    </div>
    <div class="rowitem">
        <img src="cake.png" alt="ballons"/>
        <span><a href="">Cake</a></span>        
    </div>
    <div class="rowitem">
        <img src="candles.png" alt="ballons"/>
        <span><a href="">candles</a></span>        
    </div>

</div>

<div class="clearfix"></div>

<div class="row">
    <div class="rowitem">
        <img src="bag.png" alt="ballons"/>
        <span><a href="">Bag</a></span>        
    </div>
    <div class="rowitem">
        <img src="boncy.png" alt="ballons"/>
        <span><a href="">boncy</a></span>        
    </div>
    <div class="rowitem">
        <img src="streamer.png" alt="ballons"/>
        <span><a href="">streamer</a></span>        
    </div>

</div>

CSS:

.rowitem {
    display:inline-block;

}

.rowitem img {
    display:block;

}
.clearfix {
    clear:both;
    height: 20px;
}