Question

我正在制作YouTube视频中的播放列表显示。我以为我有这个工作，但我有一些问题显示它。请参阅下面的代码。

如果我使用display: block该段落就在我想要的视频旁边，但我无法在视频后添加任何填充，以便视频不会在一起。当我使用display: inline-block时，我可以控制底部填充，但之后一些视频会相互显示。

我的CSS中缺少什么？

＆＃13;

    $(document).ready(function() {
      $.ajax({
        type: "GET",
        url: "http://gdata.youtube.com/feeds/api/playlists/PL_roY9OMKxXPoliYn_2D4t1LeoFdLpiEA?v=2&alt=json",
        cache: false,
        dataType: "jsonp",
        success: function(json) {
          var entries = json.feed.entry;

          for (var i = 0; i < entries.length; i++) {
            $('#vidBox').append('<div class="videoElem"><h3>' + entries[i].title.$t + '</h3><div class="ytVideo"><iframe width="300" height="225" src="https://www.youtube.com/embed/' + entries[i].media$group.yt$videoid.$t + '?rel=0" frameborder="0" allowfullscreen></iframe></div><p>' + entries[i].media$group.media$description.$t + '</p></div>');
          }
        }
      });
    });

＆＃13;

    .videoElem {
      display: block;
      clear: both;
      padding-bottom: 25px;
    }
    .ytVideo iframe {
      float: left;
      padding-right: 10px;
    }
    @media only screen and (max-width: 648px) {
      .ytVideo iframe {
        width: 100%;
        height: 100%;
      }
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vidBox"></div>

＆＃13;

Answer 1

除inline-block之外，您还可以width:100%阻止多个视频出现在同一行。

.videoElem {
    display: inline-block;
    width:100%;
}

这是你想要的吗？

Answer 2

问题是您正在清除浮动错误。你可以

在浮点数之后的元素上使用clear: both，而不是容器。

.videoElem:after {
  content: '';
  display: table;
  clear: both;
}

$(document).ready(function () {
  $.ajax({
    type: "GET",
    url: "http://gdata.youtube.com/feeds/api/playlists/PL_roY9OMKxXPoliYn_2D4t1LeoFdLpiEA?v=2&alt=json",
    cache: false,
    dataType: "jsonp",
    success: function (json) {
      var entries = json.feed.entry;

      for (var i = 0; i < entries.length; i++) {
        $('#vidBox').append('<div class="videoElem"><h3>' + entries[i].title.$t + '</h3><div class="ytVideo"><iframe width="300" height="225" src="https://www.youtube.com/embed/' + entries[i].media$group.yt$videoid.$t + '?rel=0" frameborder="0" allowfullscreen></iframe></div><p>' + entries[i].media$group.media$description.$t + '</p></div>');
      }
    }
  });
});

.videoElem {
  display: block;
  padding-bottom: 25px;
}
.videoElem:after {
  content: '';
  display: table;
  clear: both;
}
.ytVideo iframe {
  float: left;
  padding-right:10px;
}
@media only screen and (max-width : 648px) {
  .ytVideo iframe {
    width:100%;
    height: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vidBox"></div>

在容器上使用与overflow不同的visible：

.videoElem {
    overflow: hidden;
}

$(document).ready(function () {
  $.ajax({
    type: "GET",
    url: "http://gdata.youtube.com/feeds/api/playlists/PL_roY9OMKxXPoliYn_2D4t1LeoFdLpiEA?v=2&alt=json",
    cache: false,
    dataType: "jsonp",
    success: function (json) {
      var entries = json.feed.entry;

      for (var i = 0; i < entries.length; i++) {
        $('#vidBox').append('<div class="videoElem"><h3>' + entries[i].title.$t + '</h3><div class="ytVideo"><iframe width="300" height="225" src="https://www.youtube.com/embed/' + entries[i].media$group.yt$videoid.$t + '?rel=0" frameborder="0" allowfullscreen></iframe></div><p>' + entries[i].media$group.media$description.$t + '</p></div>');
      }
    }
  });
});

.videoElem {
  display: block;
  overflow: hidden;
  padding-bottom: 25px;
}
.ytVideo iframe {
  float: left;
  padding-right:10px;
}
@media only screen and (max-width : 648px) {
  .ytVideo iframe {
    width:100%;
    height: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vidBox"></div>

为什么填充底部不能使用内联块？

2 个答案: