Question

我的网站在一个缩略图中显示不同的文章。问题是缩略图似乎随处可见。它们没有按照应有的方式对齐。

这就是我的HTML代码的样子。

  </head>
  <body>


        <div class="top-bar">
            <div class="logo"></div>
        </div>


        <div class="title-bar">
        </div>

        <br></br>


                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img alt="300x200" src="[PIC]" width="300" />
                            <div class="caption">
                                <h3>
                                    [Name]
                                </h3>
                                <p>
                                    [Text]
                                </p>
                                <p>
                                    <a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a>
                                </p>
                            </div>
                        </div>
                    </div>


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

     </div>


</body>

结果是列未对齐。彼此相邻有3列，但高度不同，页面上的位置也不同。我该如何解决这个问题？

现在它看起来就像是带有

的代码中的楼梯

我想：方框1.方框2。方框3。

Answer 1

Bootstrap 3列布局将类似于

<div class="col-md-12">
 <div class="row">
  <div class="col-md-4">.col1</div>
  <div class="col-md-4">.col2</div>
  <div class="col-md-4">.col3</div>
 </div>
</div>

为所有图像保持相同的高度为所有图像分配相同的高度，h3和p标记（在框中）

示例摘录https://bootsnipp.com/snippets/featured/store-product-layout

并且在你的html代码中有很多关闭＆lt; / DIV＆GT;标签检查html验证一次。

HTML：列到处浮动

1 个答案: