如何修复段落的位置

Question

Fiddle这是我的代码：

.recommendedmovies {
    overflow: auto;
    white-space: nowrap;
    text-align: center;
}

.moviescard {
    width:185px;
	list-style-type:none;
	display:inline-block;
	height:450px;
	vertical-align: top;
    white-space: normal;
}

.movierating {
}

<div class="recommendedmovies">
    <ol>
        <li class="moviescard">
            <img class="lazy" src="http://image.tmdb.org/t/p/w185/imekS7f1OuHyUP2LAiTEM0zBzUz.jpg" width="217px" height="325px" />
            <p class="moviename">Wonder Woman</p>
            <p class="movierating">8/10</p>	
        </li>
        <li class="moviescard">
            <img class="lazy" src="http://image.tmdb.org/t/p/w185/xbpSDU3p7YUGlu9Mr6Egg2Vweto.jpg" width="217px" height="325px" />
            <p class="moviename">Pirates of the Caribbean: Caribbean: Dead Men Tell No Tales </p>
            <p class="movierating">6/10</p>	
        </li>
        <li class="moviescard">
            <img class="lazy" src="http://image.tmdb.org/t/p/w185/2n4x2FRcmMIsHxcucxvWxb0Yry6.jpg" width="217px" height="325px" />
            <p class="moviename">War for the Planet of the Apes</p>
            <p class="movierating">5/10</p>	
        </li>
    </ol>
</div>

我想让评分低于电影名称，保持单行，如截图中所示（在假想的红线上）。

请告诉我，如果您需要更多信息，谢谢。

Answer 1

将.moviescard位置设置为相对位置（上下文），并将.movierating绝对置于卡片的底部。

.recommendedmovies {
  overflow: auto;
  white-space: nowrap;
  text-align: center;
}

.moviescard {
  position: relative;
  width: 185px;
  list-style-type: none;
  display: inline-block;
  height: 450px;
  vertical-align: top;
  white-space: normal;
}

.movierating {
  position: absolute;
  bottom: 0;
  width: 100%;
}

<div class="recommendedmovies">
  <ol>
    <li class="moviescard">
      <img class="lazy" src="http://image.tmdb.org/t/p/w185/imekS7f1OuHyUP2LAiTEM0zBzUz.jpg" width="217px" height="325px" />
      <p class="moviename">Wonder Woman</p>
      <p class="movierating">8/10</p>
    </li>


    <li class="moviescard">
      <img class="lazy" src="http://image.tmdb.org/t/p/w185/xbpSDU3p7YUGlu9Mr6Egg2Vweto.jpg" width="217px" height="325px" />
      <p class="moviename">Pirates of the Caribbean: Caribbean: Dead Men Tell No Tales </p>
      <p class="movierating">6/10</p>
    </li>


    <li class="moviescard">
      <img class="lazy" src="http://image.tmdb.org/t/p/w185/2n4x2FRcmMIsHxcucxvWxb0Yry6.jpg" width="217px" height="325px" />
      <p class="moviename">War for the Planet of the Apes</p>
      <p class="movierating">5/10</p>
    </li>



  </ol>

</div>

Answer 2

您的电影卡和图片已修复尺寸..所以只需添加

即可

.moviename{
    height:100px;
}

Answer 3

您可以使用position:relative中的li和position:absolute类中的.movierating

＆＃13;

＆＃13;

.recommendedmovies {
	overflow: auto;
  white-space: nowrap;
	text-align: center;
}


.moviescard {
  width:185px;
	list-style-type:none;
	display:inline-block;
	height:450px;
	vertical-align: top;
    white-space: normal;
    position: relative;
}

.movierating {
  bottom: 0;
    position: absolute;
    width: 100%;
}

＆＃13;

<div class="recommendedmovies">
		    <ol>
          <li class="moviescard">
            <img class="lazy" src="http://image.tmdb.org/t/p/w185/imekS7f1OuHyUP2LAiTEM0zBzUz.jpg" width="217px" height="325px" />
           <p class="moviename">Wonder Woman</p>
           <p class="movierating">8/10</p>	
         </li>
         
         
          <li class="moviescard">
            <img class="lazy" src="http://image.tmdb.org/t/p/w185/xbpSDU3p7YUGlu9Mr6Egg2Vweto.jpg" width="217px" height="325px" />
           <p class="moviename">Pirates of the Caribbean: Caribbean: Dead Men Tell No Tales </p>
           <p class="movierating">6/10</p>	
         </li>
         
         
          <li class="moviescard">
            <img class="lazy" src="http://image.tmdb.org/t/p/w185/2n4x2FRcmMIsHxcucxvWxb0Yry6.jpg" width="217px" height="325px" />
           <p class="moviename">War for the Planet of the Apes</p>
           <p class="movierating">5/10</p>	
         </li>
        
        
        
         </ol>
	
	    </div>

＆＃13;

＆＃13;

＆＃13;