CSSが浮動小数点浮動小数点を返す

Question

浮動小数点divのレスポンシブテンプレートに問題があります。下の画像には空白が見えます。そして、すべてのページではなく、いくつかのページブロックで、すべてのスペースを適切に埋めています。ここで

単純なブロックのコードです：

<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で試してみました。誰でも何ができるのか知っていますか？

.short-movie { 
    height: 275px; 
} 

すべての動画アイテムが同じ高さであることにし、それらが前の要素の高さに影響されることを停止するには、次の例

だけ設定

.img-box 
{ 
height:300px; 
} 

Answer 1

については、このdivのための標準的な高さは、設定し

Answer 2

。