Question

我有这个HTML：

<div class="bannerWrapper">
  <div class="bannerCollection">
    <div class="bannerUnit">
      <a href=""><img src="" /></a>
    </div>
    <div class="bannerUnit">
      <a href=""><img src="" /></a>
    </div>
    <div class="bannerUnit">
      <a href=""><img src="" /></a>
    </div>
    <div class="bannerUnit">
      <a href=""><img src="" /></a>
    </div>
  </div>
  <div class="bannerCollection">
    <div class="bannerUnit">
      <a href=""><img src="" /></a>
    </div>
    <div class="bannerUnit">
      <a href=""><img src="" /></a>
    </div>
  </div>
</div>

现在，我想将所有横幅显示为1行并且具有响应性，因此它们应该在小屏幕上以相同的方式调整大小。

此CSS可以完成这项工作：

.bannerWrapper {
    display: table;
    margin: 5px auto;
}
.bannerCollection {
    display: contents;
}
.bannerCollection .bannerUnit {
    display: table-cell;
    padding: 0 3px;
}
.bannerUnit img {
    max-width: 100%;
}

这里是JS小提琴：https://jsfiddle.net/NoGo/8pzsk0m2/

我的问题：我不能使用display: contents;，因为这似乎会导致Javascript选择器出现问题。

是否有机会在不更改div.bannerCollection内部和不使用display: contents;的情况下实现这一目标？

Answer 1

可以使用flexbox完成此设计。无需显示：内容。

只需将display: flex添加到.bannerWrapper和.bannerCollection。从display: table-cell

中删除.bannerCollection .bannerUnit

我在这里修改了您的小提琴： https://jsfiddle.net/8pzsk0m2/5/

请务必注意浏览器对显示的支持：内容仍然很低，并且取决于您所针对的浏览器，明智的做法是在广泛支持之前避免使用它。 https://caniuse.com/#search=display%3A%20contents

Answer 2

尝试一下

.bannerWrapper {
    display: flex;
    margin: 5px auto;
}
.bannerCollection {
    display: flex;
}
.bannerCollection .bannerUnit {
    padding: 0 3px;
}
.bannerUnit img {
    max-width: 100%;
}

<div class="bannerWrapper">
  <div class="bannerCollection">
    <div class="bannerUnit">
      <a href=""><img src="https://dummyimage.com/150x150/000/fff" /></a>
    </div>
    <div class="bannerUnit">
      <a href=""><img src="https://dummyimage.com/150x150/000/fff" /></a>
    </div>
    <div class="bannerUnit">
      <a href=""><img src="https://dummyimage.com/150x150/000/fff" /></a>
    </div>
    <div class="bannerUnit">
      <a href=""><img src="https://dummyimage.com/150x150/000/fff" /></a>
    </div>
  </div>
  <div class="bannerCollection">
    <div class="bannerUnit">
      <a href=""><img src="https://dummyimage.com/150x150/000/fff" /></a>
    </div>
    <div class="bannerUnit">
      <a href=""><img src="https://dummyimage.com/150x150/000/fff" /></a>
    </div>
  </div>
</div>

以给定的HTML结构内嵌并响应式显示横幅广告

2 个答案: