Question

我希望连续放置3张图片，并使用div和css将3张图片连续放在html页面上。我可以连续放置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;
}

Answer 2

如果你想保留你的结构，可以添加float：left到底部3个div，然后添加div:nth-child(4n) {clear:left;}样式。但是我会将所有div包装在一个固定宽度的容器div中，这样当你最小化窗口时它们就不会换行 - 除非你想让它们换行。

Answer 3

尝试使用特定ID选择器制作自定义网格解决方案并不是一个好主意。制作网格的最佳方法是使用可与类一起使用的可扩展解决方案。有很多这样的解决方案，包括Bootstrap（评论中提到过）。

我个人喜欢Dan Eden的Toast。它非常易于扩展且易于使用。

要使用它，请转到repo并下载zip。
打开文件。转到Toast-master＆gt; css＆gt; grid.css
将grid.css放入您的项目中。
像这样链接：

并像这样使用它（它具有响应性和灵活性）：

<div class="container">
    <div class="grid">
        <div class="grid__col grid__col--1-of-3">

        </div>
        <div class="grid__col grid__col--1-of-3">

        </div>
        <div class="grid__col grid__col--1-of-3">

        </div>
  </div>
</div>

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

3 个答案: