Question

我试图让网格为视频缩略图工作。我希望桌面上有4列，平板电脑/手机上有2列。

每列包含缩略图和视频标题。问题是某些视频标题比其他视频标题更长，导致网格混乱。我只想制作它，以便列可以是任何高度，每行的列数不会从浮动中搞砸。

我在这个网站上读到了另一个答案，但它根本不适用于我。

这是我的HTML代码：

<div class="row">
   <div class="col-md-3 col-sm-6 col-xs-6 index-col">
      <div class="well">
         <a href="#">
         <img src="http://localhost/me/loldie/images/thumbnails/gas-station-safety-19.jpg" alt="Gas station safety" class="img-responsive">
         Gas station safety             
         </a>
      </div>
   </div>
   <div class="col-md-3 col-sm-6 col-xs-6 index-col">
      <div class="well">
         <a href="#">
         <img src="http://localhost/me/loldie/images/thumbnails/wild-squirrels-love-sunflower-seeds-17.jpg" alt="Wild squirrels love sunflower seeds" class="img-responsive">
         Wild squirrels love sunflower seeds                
         </a>
      </div>
   </div>
   <div class="col-md-3 col-sm-6 col-xs-6 index-col">
      <div class="well">
         <a href="#">
         <img src="http://localhost/me/loldie/images/thumbnails/bobcats-fighting-in-tree-22.jpg" alt="Bobcats fighting in tree" class="img-responsive">
         Bobcats fighting in tree               
         </a>
      </div>
   </div>
   <div class="col-md-3 col-sm-6 col-xs-6 index-col">
      <div class="well">
         <a href="#">
         <img src="http://localhost/me/loldie/images/thumbnails/head-on-train-crash-20.jpg" alt="Head on train crash" class="img-responsive">
         Head on train crash                
         </a>
      </div>
   </div>
   <div class="col-md-3 col-sm-6 col-xs-6 index-col">
      <div class="well">
         <a href="#">
         <img src="http://localhost/me/loldie/images/thumbnails/spelling-pregnant-is-hard-2.jpg" alt="Spelling pregnant is hard" class="img-responsive">
         Spelling pregnant is hard              
         </a>
      </div>
   </div>
   <div class="col-md-3 col-sm-6 col-xs-6 index-col">
      <div class="well">
         <a href="#">
         <img src="http://localhost/me/loldie/images/thumbnails/kid-rolls-car-while-singing-1.jpg" alt="Kid rolls car while singing" class="img-responsive">
         Kid rolls car while singing                
         </a>
      </div>
   </div>
   <div class="col-md-3 col-sm-6 col-xs-6 index-col">
      <div class="well">
         <a href="#">
         <img src="http://localhost/me/loldie/images/thumbnails/usa-unemployment-map-timeline-6.jpg" alt="USA unemployment map timeline" class="img-responsive">
         USA unemployment map timeline              
         </a>
      </div>
   </div>
   <div class="col-md-3 col-sm-6 col-xs-6 index-col">
      <div class="well">
         <a href="#">
         <img src="http://localhost/me/loldie/images/thumbnails/guy-trolls-car-dealership-5.jpg" alt="Guy trolls car dealership" class="img-responsive">
         Guy trolls car dealership              
         </a>
      </div>
   </div>
   <div class="col-md-3 col-sm-6 col-xs-6 index-col">
      <div class="well">
         <a href="#">
         <img src="http://localhost/me/loldie/images/thumbnails/red-dead-redemption-2-trailer-9.jpg" alt="Red Dead Redemption 2 Trailer" class="img-responsive">
         Red Dead Redemption 2 Trailer              
         </a>
      </div>
   </div>
   <div class="col-md-3 col-sm-6 col-xs-6 index-col">
      <div class="well">
         <a href="#">
         <img src="http://localhost/me/loldie/images/thumbnails/nintendo-switch-preview-7.jpg" alt="Nintendo Switch preview" class="img-responsive">
         Nintendo Switch preview                
         </a>
      </div>
   </div>
   <div class="col-md-3 col-sm-6 col-xs-6 index-col">
      <div class="well">
         <a href="#">
         <img src="http://localhost/me/loldie/images/thumbnails/you-re-dying-12.jpg" alt="You're dying" class="img-responsive">
         You're dying               
         </a>
      </div>
   </div>
   <div class="col-md-3 col-sm-6 col-xs-6 index-col">
      <div class="well">
         <a href="#">
         <img src="http://localhost/me/loldie/images/thumbnails/university-goalie-signed-by-canucks-10.jpg" alt="University goalie signed by Canucks" class="img-responsive">
         University goalie signed by Canucks                
         </a>
      </div>
   </div>
</div>

这是我的CSS代码：

.index-col a {
    display: block;
}
.index-col a img {
    margin-bottom: 10px;
}

@media (max-width: 991px) {
    .index-col:nth-child(2n) {
        border: 1px solid red;
    }

    .index-col:nth-child(2n)::after {
        content: '';
        display: block;
        clear: both;
    }
}

@media (min-width: 992px) {
    .index-col:nth-child(4n) {
        border: 1px solid green;
    }

    .index-col:nth-child(4n)::after {
        content: '';
        display: block;
        clear: both;
    }
}

问题在于:: after代码。它似乎根本没有清除浮子。它没有任何效果。

任何帮助都将不胜感激。

Answer 1

尝试将clear: both设置为下一行中的第一个元素，而不是行中最后一个元素的::after伪元素。

.index-col a {
    display: block;
}
.index-col a img {
    margin-bottom: 10px;
}

.index-col:nth-child(4n+1) {
        clear: both;
    }

@media (max-width: 991px) {
    .index-col:nth-child(2n) {
        border: 1px solid red;
    }

    .index-col:nth-child(2n+1) {
        clear: both;
    }
}

@media (min-width: 992px) {
    .index-col:nth-child(4n) {
        border: 1px solid green;
    }

    .index-col:nth-child(4n+1) {
        clear: both;
    }
}

Here你有一个有效的例子

不同高度列的Bootstrap网格

1 个答案: