html - 为什么 padding-bottom 不能与 inline-block 一起使用？

Question

我正致力于从我们的 YouTube 视频创建播放列表显示。我以为我有这个工作，但我对它的显示方式有一些疑问。请参阅下面的代码。

如果我使用 display: block 段落就像我想要的那样紧挨着视频，但我不能在视频后添加任何填充，这样视频就不会在一起。当我使用 display: inline-block 时，我可以控制底部填充，但是一些视频会并排显示。

我的 CSS 中缺少什么？

    $(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;
      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%;
      }
    }

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

Answer 1

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

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

这是你想要的吗？