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：列浮動到處

回答

相關問題