如何使格採取第一空空間

Question

如何使後採取的第一個空的空間是這樣的：http://www.dodaj.rs/f/2g/kr/2TzaCg1J/dodaj.png

這裏是我的代碼，但它不看一樣....

<div class="container"> 
      <div class="row"> 
      <div class="col-sm-4 col-md-4"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive" /> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br /> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2014/01/jquery-highlight-table-row-and-column.html" class="btn btn-warning btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-sm-4 col-md-4"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/2980b9/ffffff&text=CSS3" class="img-responsive" /> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br /> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2013/11/share-social-media-round-buttons.html" class="btn btn-primary btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-sm-4 col-md-4"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/2980b9/ffffff&text=CSS3" class="img-responsive" /> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br /> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2013/11/share-social-media-round-buttons.html" class="btn btn-primary btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-sm-4 col-md-4"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/2980b9/ffffff&text=CSS3" class="img-responsive" /> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br /> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2013/11/share-social-media-round-buttons.html" class="btn btn-primary btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-sm-4 col-md-4"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/2980b9/ffffff&text=CSS3" class="img-responsive" /> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br /> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2013/11/share-social-media-round-buttons.html" class="btn btn-primary btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-sm-4 col-md-4"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/2980b9/ffffff&text=CSS3" class="img-responsive" /> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br /> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2013/11/share-social-media-round-buttons.html" class="btn btn-primary btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div class="col-sm-4 col-md-4"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/47A447/ffffff&text=jQuery" class="img-responsive" /> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br /> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2013/07/cool-social-sharing-button-using-css3.html" class="btn btn-success btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 
    </div> 
</div> 

另外這裏這看起來如何生活： http://www.bootply.com/8K6VYbTlYZ

Answer 1

好吧，首先你需要重新安排你的div和類。你的行應該涵蓋一切。您需要行的高度匹配到柱高度Bootply working example

這裏是CSS：

.row-to-col{ 
    display:table; 
} 
.col-to-row{ 
    float: none; 
    display: table-cell; 
    vertical-align: top; 
} 
.top-buffer{ 
    margin-top: 20px; 
} 

的Html

<div class="container"> 
    <div class="row row-to-col"> 
      <div class="col-sm-4 col-md-4 col-to-row"> 
      <div class="col-sm-12 col-md-12"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/e67e22/ffffff&amp;text=HTML5" class="img-responsive"> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2014/01/jquery-highlight-table-row-and-column.html" class="btn btn-warning btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-sm-12 col-md-12 top-buffer"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/2980b9/ffffff&amp;text=CSS3" class="img-responsive"> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2013/11/share-social-media-round-buttons.html" class="btn btn-primary btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 
      </div> 
      <div class="col-sm-4 col-md-4 col-to-row"> 
      <div class="col-sm-12 col-md-12"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/2980b9/ffffff&amp;text=CSS3" class="img-responsive"> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2013/11/share-social-media-round-buttons.html" class="btn btn-primary btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-sm-12 col-md-12 top-buffer"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/2980b9/ffffff&amp;text=CSS3" class="img-responsive"> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2013/11/share-social-media-round-buttons.html" class="btn btn-primary btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="col-sm-12 col-md-12 top-buffer"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/2980b9/ffffff&amp;text=CSS3" class="img-responsive"> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2013/11/share-social-media-round-buttons.html" class="btn btn-primary btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 
    </div> 
<div class="col-sm-4 col-md-4 col-to-row"> 
      <div class="col-sm-12 col-md-12"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/2980b9/ffffff&amp;text=CSS3" class="img-responsive"> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2013/11/share-social-media-round-buttons.html" class="btn btn-primary btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div class="col-sm-12 col-md-12 top-buffer"> 
       <div class="post"> 
        <div class="post-img-content"> 
         <img src="http://placehold.it/460x250/47A447/ffffff&amp;text=jQuery" class="img-responsive"> 
         <span class="post-title"><b>Make a Image Blur Effects With</b><br> 
          <b>CSS3 Blur</b></span> 
        </div> 
        <div class="content"> 
         <div class="author"> 
          By <b>Bhaumik</b> | 
          <time datetime="2014-01-20">January 20th, 2014</time> 
         </div> 
         <div> 
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
          Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
          unknown printer took a galley of type and scrambled it to make a type specimen book. 
         </div> 
         <div> 
          <a href="http://www.jquery2dotnet.com/2013/07/cool-social-sharing-button-using-css3.html" class="btn btn-success btn-sm">Read more</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>