CSS浮动左奇怪行为

我有一个浮动div在响应模板中的问题。您可以在下面的图片上看到空白空间。它不是发生在每个页面上，有的页面块会正确填充所有空间。CSS浮动左奇怪行为

下面是一个简单的块的代码：

<div class="movie-item ignore-select short-movie"> 
    <div class="movie-img img-box"> 
     <img src="/templates/movie-groovie/dleimages/no_image.jpg" alt="text" /> 
     <i class="fa fa-info show-desc"></i> 
     <div class="movie-img-inner"> 
      <i class="fa fa-play-circle-o go-watch pseudo-link" data-link="#"></i> 
     </div> 
     <div class="movie-series">Поле зеленое</div> 
     <span>доп поле</span> 
    </div> 
    <a class="movie-title" href="#">TITLE</a> 
    <div class="movie-tags nowrap">Some text</div> 
    <div class="movie-desc"> 
     <div class="movie-date">2 март 2017</div> 
     <div class="movie-director"><b>Доп поле название:</b> доп поле Джеймс Кэмерон</div> 
     <div class="movie-text">Some text</div> 

     <div class="movie-rate"><i class="fa fa-thumbs-o-up"></i><span id="ratig-layer-5846" class="ignore-select"><span class="ratingtypeplus ignore-select" >0</span></span></div> 

    </div> 
</div>

，它的风格：

.short-movie { 
    float: left; 
    width: 18%; 
    margin: 0 1% 20px 1%; 
} 

styles.css:146 
.movie-item { 
    position: relative; 
    z-index: 50; 
    margin: 0 10px; 
    max-width: 200px; 
} 

.movie-img { 
    height: 210px; 
    z-index: 50; 
    border: 4px solid #fff; 
    box-shadow: 0 0 0 1px #e3e3e3; 
    border-radius: 2px; 
} 

styles.css:6 
.img-box { 
    overflow: hidden; 
    position: relative; 
} 

.fa { 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
styles.css:155 
.show-desc { 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 150; 
    font-size: 18px !important; 
    cursor: pointer; 
    border-radius: 0 0 0 3px; 
    background-color: #fff; 
    color: #487a1b; 
    width: 30px; 
    height: 30px; 
    line-height: 30px !important; 
    text-align: center; 
} 

.movie-img-inner { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 100; 
    border: 5px solid #97ce68; 
    opacity: 0; 
    background-color: rgba(0,0,0,0.6); 
} 

.movie-series { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    z-index: 50; 
    width: 100%; 
    background-color: rgba(151, 206, 104, 0.8); 
    color: #487a1b; 
    padding: 10px; 
    font-weight: 700; 
    text-align: center; 
} 

.movie-title { 
    display: block; 
    margin: 10px 0 3px 0; 
    height: 36px; 
    overflow: hidden; 
    color: #333; 
} 
.movie-desc { 
    position: absolute; 
    left: 100%; 
    top: 0; 
    z-index: 150; 
    width: 400px; 
    padding: 20px; 
    background-color: #FFF; 
    display: none; 
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.3); 
    min-height: 80px; 
    border-radius: 4px; 
}

我无法找到导致问题的原因。试用过OS X Chrome和Safari。有人知道它会是什么吗？

来源

2017-03-09 Big Coach

尝试删除'.short-movie'上的底部边距，然后仅对该行的每个最后一个子元素添加边距底部。 – GvM

只需将max-height：210px添加到这些div。 –

@shubhamagrawal究竟是哪一个？ –

只需设置：

.short-movie { 
    height: 275px; 
}

为了让所有的电影项目是相同的高度，并阻止他们受着由先前的元素高度。

来源

2017-03-09 06:43:00 andreas

但我不需要在同一行中的所有块。 –

对不起，没有得到...你的意思是图像最后一行的正确空间？ – andreas

你可以看到所有的空闲空间，他们不应该在那里。 –

设置标准高度为这个div，例如

.img-box 
{ 
height:300px; 
}

来源

2017-03-09 06:37:28 user7357089

它没有帮助。我的身高在 '.movie-img {height：210px; z-index：50; border：4px solid #fff; box-shadow：0 0 0 1px＃e3e3e3; border-radius：2px; }' –

CSS浮动左奇怪行为

回答

相关问题