避免自舉中的大間距？

我有一個自動填充使用數據庫表的引導頁面。我的問題是，與我正在使用的當前代碼，它看起來像這樣： Current Look 避免自舉中的大間距？

有沒有什麼辦法，我可以自動移動一切看起來像這樣？ Proposed Look

目前代碼：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="block block-transparent"> 
       <div class="content tasks"> 
        <div class="task-item priority-<%=importancecolor%> float"> 
         <div class="task-item-content"> 
          <div class="task-item-head"><%=rs("Summary")%></div> 
          <div class="task-item-subhead"><%=rs("detail")%></div> 
          <div class="task-item-date"><i class="icon-calendar"></i>&nbsp;<%=rs("targetcompletiondate")%>&nbsp;&nbsp;&nbsp;<i class="icon-user"></i>&nbsp;<%=rs("assignedto")%></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2017-07-25 Michael Davison

首先你需要知道的是引導的工作與網格，這就是爲什麼有列和行。如果你想實現你想要的，我會建議使用你自己的自定義CSS。 div將根據內容的長度進行擴展。我的CSS和HTML想象下面這樣：

\t <!DOCTYPE html> 
 
\t <html> 
 
\t <head> 
 
\t  <title>Masonry</title> 
 
\t <style> 
 
\t .col-1{background: #2ecc71;width: 30%;float: left;} 
 
\t .col-2{background: #34495e;width: 30%;float: left;} 
 
\t .col-3{background: #2980b9;width: 30%;float: left;} 
 
\t .col-4{background: #c0392b;width: 30%;float: left;} 
 
\t .col-5{background: #7f8c8d;width: 30%;float: left;} 
 
\t </style> 
 
\t </head> 
 
\t <body> 
 

 
\t <div class="wrap"> 
 
\t  <div class="col-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia optio nihil rerum et deserunt tempore quidem, voluptate voluptates mollitia doloremque, excepturi cum dolore veniam dolorem? Error magnam, molestiae non rem!</div> 
 
\t  <div class="col-2"> voluptate voluptates mollitia doloremque, excepturi cum dolore veniam dolorem? Error magnam, molestiae non rem!</div> 
 
\t  <div class="col-3">id itaque corrupti?</div> 
 
\t  <div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam fugiat consequuntur molestias quisquam nemo enim perferendis praesentium magnam, perspiciatis, itaque labore nesciunt accusantium assumenda quas incidunt aut animi veritatis cum.</div> 
 
\t  <div class="col-5"> voluptate voluptates mollitia doloremque, excepturi cum dolore veniam dolorem? Error magnam, molestiae non rem!</div> 
 
\t </div> 
 

 
\t </body> 
 
\t </html>

來源

2017-07-25 09:24:10

你可以舉一個我不得不使用的css類型的例子嗎？ –

你可以在[codepen]（https://codepen.io/viduthalai1947/pen/jPoVBQ）中籤出此鏈接 –

這個答案有效，但我必須重新設計我的結構 –

如果我理解正確的話，你想有一個磚石風格爲網格，像Pinterest的一樣。您可以使用flexbox（檢查https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a）來實現它，或者，如果您希望繼續使用Bootstrap網格，請嘗試使用JavaScript（https://masonry.desandro.com/），altought我強烈建議您不要使用JavaScript來處理您可以在CSS中執行的操作（如果您沒有瀏覽器兼容性問題）。

來源

2017-07-25 09:34:44

避免自舉中的大間距？

回答

相關問題