HTML：列到处浮动_Html_Thumbnails

HTML：列到处浮动

html

HTML：列到处浮动,html,thumbnails,Html,Thumbnails,我的网站在一个缩略图中显示不同的文章。问题是缩略图似乎到处都是。它们没有按应有的方式对齐这就是我的HTML代码的样子 </head> <body> <div class="top-bar"> <div class="logo"></div> </div> <div class="title-bar"> &l

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

这就是我的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.

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


.col1
.col2
.col3

要保持所有框的高度相等，请为所有图像、h3和p标记（位于框中）指定相同的高度

示例代码段

在您的html代码中有许多结束标记检查html验证一次。

您使用的是框架（如引导）吗？你期望的布局是什么？是的，我正在使用引导。我所期望的是每个“框”（HTML中的缩略图）位于同一行。不是像楼梯一样。