使用给定的 HTML 结构显示内联横幅和响应式横幅

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 Fiddle: https://jsfiddle.net/NoGo/8pzsk0m2/

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

是否有机会在不更改 div.bannerCollection 内的任何内容且不使用 display: contents; 的情况下实现此目标？

Answer 1

这个设计可以使用flexbox来完成。不需要显示：contents.

只需将 display: flex 添加到 .bannerWrapper 和 .bannerCollection。从 .bannerCollection .bannerUnit

中删除 display: table-cell

我在这里修改了你的fiddle： 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 结构显示内联横幅和响应式横幅

Display Banners inline and responsive with a given HTML structure

html

css

inline

responsive