HTML：列浮动到处

我的网站在一个缩略图中显示不同的文章。问题在于，缩略图似乎无处不在。它们并没有像应该那样对齐。HTML：列浮动到处

这就是我的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 BOX2。框3.

来源

2017-08-31 Robbert

你在使用框架（比如Bootstrap）吗？你期待的布局是什么？ –

是的，我正在使用Bootstrap。我期望的是每个“框”（HTML中的缩略图）在同一行。不是它像楼梯一样完成。 – Robbert

引导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代码中有很多关闭</div>标签检查一次html验证。

来源

2017-08-31 15:45:03 Znaneswar

HTML：列浮动到处

回答

相关问题