内联列表引导程序多行文本中断行

时间：2015-04-04 11:53:25

标签： css twitter-bootstrap

我有这个代码 HTML代码

<div class="container">
   <div class="row">
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1840309" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Divergent" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1840309" class="movie_title">
            Divergent
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2109248" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Transformers: Age of Extinction" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2109248" class="movie_title">
            Transformers: Age of Extinction
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2039393" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="The Gambler" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2039393" class="movie_title">
            The Gambler
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2908446" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Insurgent" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2908446" class="movie_title">
            Insurgent
            </a>
            <div class="movie_year">
               2015
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1399103" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Transformers: Dark of the Moon" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1399103" class="movie_title">
            Transformers: Dark of the Moon
            </a>
            <div class="movie_year">
               2011
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1620719" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Dabangg" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1620719" class="movie_title">
            Dabangg
            </a>
            <div class="movie_year">
               2010
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1099212" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Twilight" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1099212" class="movie_title">
            Twilight
            </a>
            <div class="movie_year">
               2008
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1259571" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="The Twilight Saga: New Moon" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1259571" class="movie_title">
            The Twilight Saga: New Moon
            </a>
            <div class="movie_year">
               2009
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2338151" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="PK" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2338151" class="movie_title">
            PK
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2713180" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Fury" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2713180" class="movie_title">
            Fury
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2446042" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Taken 3" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2446042" class="movie_title">
            Taken 3
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=3280916" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="The Atticus Institute" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=3280916" class="movie_title">
            The Atticus Institute
            </a>
            <div class="movie_year">
               2015
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1780798" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Clown" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1780798" class="movie_title">
            Clown
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1535109" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Captain Phillips" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1535109" class="movie_title">
            Captain Phillips
            </a>
            <div class="movie_year">
               2013
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0162222" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Cast Away" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0162222" class="movie_title">
            Cast Away
            </a>
            <div class="movie_year">
               2000
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0362227" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="The Terminal" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0362227" class="movie_title">
            The Terminal
            </a>
            <div class="movie_year">
               2004
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0120363" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Toy Story 2" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0120363" class="movie_title">
            Toy Story 2
            </a>
            <div class="movie_year">
               1999
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0808151" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Angels & Demons" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0808151" class="movie_title">
            Angels & Demons
            </a>
            <div class="movie_year">
               2009
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0435761" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Toy Story 3" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0435761" class="movie_title">
            Toy Story 3
            </a>
            <div class="movie_year">
               2010
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1673434" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="The Twilight Saga: Breaking Dawn - Part 2" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1673434" class="movie_title">
            The Twilight Saga: Breaking Dawn - Part 2
            </a>
            <div class="movie_year">
               2012
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0337692" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="On the Road" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0337692" class="movie_title">
            On the Road
            </a>
            <div class="movie_year">
               2012
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=2582846" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="The Fault in Our Stars" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=2582846" class="movie_title">
            The Fault in Our Stars
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1587310" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Maleficent" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1587310" class="movie_title">
            Maleficent
            </a>
            <div class="movie_year">
               2014
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=0114709" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Toy Story" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=0114709" class="movie_title">
            Toy Story
            </a>
            <div class="movie_year">
               1995
            </div>
         </div>
      </div>
      <div class="movie_item col-xs-6">
         <a href="Movie.php?MovieID=1905041" class="movie_link">
            <figure><img class="img-responsive" src="http://ia.media-imdb.com/images/M/MV5BMTQ1NDk3NTk0MV5BMl5BanBnXkFtZTgwMTk3MDcxMzE@._V1_SY255_CR0,0,170,255.jpg" alt="Fast & Furious 6" /></figure>
         </a>
         <div class="movie_bottom">
            <a href="Movie.php?MovieID=1905041" class="movie_title">
            Fast & Furious 6
            </a>
            <div class="movie_year">
               2013
            </div>
         </div>
      </div>
   </div>
</div>

和css 

body {
    background: white;
    text-align: center;
}
a {
    color: #6FA5FD;
    font-weight: bold;
}
/*.movie_title {
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden
}*/
/*figure {
    border: 5px solid white;
    border-radius: 4px;
}*/
.movie_item {
    margin-bottom: 15px;
}
.movie_bottom {
    margin: 0 auto;
    padding-left: 5px;
    max-width: 180px;
    text-align: left
}
.movie_link figure img {
    max-height:255px;
}
@media (max-width: 767px) {
    .movie_link {
        display: inline-block;
        max-width: 180px;
    }
    .movie_bottom {
        font-size: 13px;
    }
}
@media (min-width: 768px) {
    .movie_item {
        width: 20%;
    }
    .movie_bottom {
        font-size: 13px;
    }
    .img-responsive {
        width: 110px;
        height: 165px;
    }
}
@media (min-width: 992px) {
    .movie_item {
        width: 25%;
        padding: 0px 31px;
    }
    .img-responsive {
        width: 170px;
        height: 255px;
    }
    .movie_bottom {
        font-size: 15px;
    }
}
@media (min-width: 1200px) {
    .movie_item {
        width: 20%;
        padding: 0px 27px;
    }
}

这也需要bootstrap.css

此代码的问题是当标题位于两行时，列表在该电影下方被破坏，这不会发生在行的最后一个元素中，在此代码的输出中第3行的第一个电影的标题是2行，预期它下方的电影项目丢失并向右推。我应该怎么做才能克服这个问题，注意：我不想隐藏文字（省略号）

1 个答案:

答案 0 :(得分：1)

问题是你的浮动div的高度是不同的......你可以给你的div一个固定的高度，为第二行文字腾出空间：

.movie_item {
    height: 220px;
}

请参阅 fiddle 。

...或者考虑不使用bootstrap并删除div上的浮点数。例如，您可以使用display: flex;（请参阅w3和this guide）。

例如，包含div的内容如下：

display: flex;
flex-wrap: wrap;

请参阅 fiddle （.row替换为.wrap以避免引导样式。

相关问题
最新问题