Question

我有一个页面，显示特定电影的详细信息。信息显示在一个容器中，该容器具有多个div，分别用于电影海报，标题，发行年份等，并且所有这些都使用网格。我遇到的问题是尝试使它响应时：随着屏幕变小，div包含文本的叠加层在电影海报的div上。已经尝试将两个div放在相同的z-index，float: left和overflow: hidden

上

And this is the CSS

/*  SECTION Movie  */
.section {
   clear: both;
   padding: 0px;
   margin: 0px;
}

/*  COLUMN SETUP  */
.col {
   display: block;
   float:left;
}
.col:first-child { margin-left: 0rem; }

.movieDetails{
   margin-top: 10rem;
   overflow: hidden;
}
/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_1_of_2 {
  width: 30%;
}
.span_2_of_2{
   width: 70%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
   .col { 
     margin: 1% 0 1% 0%;
 }
}

@media only screen and (max-width: 480px) {
   .span_1_of_2, .span_2_of_2  { width: 100%; }
}

<!-- Father container -->
<div class="screenContainer" id="movieContainer">

  <div class="movieTop section group ">
      <button id =  "addToList" title="Add to my list"><strong>+</strong></button>
    <!-- Movie poster -->
    <div class=" first col span_1_of_2">
    <span class="movie-element box1">
      <figure>
        <img id="movie-picture">
      </figure>
    </span>
  </div>
    <div class="movieDetails col span_2_of_2">
      <!-- Movie Title  -->
      <div class="movie-element box2 ">
        <label for="movieTitleSpan">Title: </label>
        <span id="movie-title"></span>
      </div>

      <!-- Release year  -->
      <div class="movie-element box3">
        <label for="movieReleaseYear">Year: </label>
        <span id="movie-year"></span>
      </div>

      <!-- Rating -->
      <div class="movie-element box4">
        <label for="movieRating">Rating: </label>
        <span id="movie-rating"></span>
      </div>

      <!-- Director -->
      <div class="movie-element box5">
        <label for="movieDirector">Director: </label>
        <span id="movie-director"></span>
      </div>

      <!-- Actors -->
      <div class="movie-element">
        <label for="movieActors">Actors: </label>
        <span id="movie-actors"></span>
      </div>
    </div> <!-- End movieDetails -->

  <br>
</div> <!-- End movieTop -->

文本div将图像div覆盖在CSS网格上

0 个答案: