Display Banners inline and responsive with a given HTML structure

Question

I have this 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>

Now I want to display all banners in 1 line and responsive, so they should resize all the same way on small screens.

This CSS did the job:

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

Here's a JS Fiddle: https://jsfiddle.net/NoGo/8pzsk0m2/

My problem: I cannot use display: contents;, because this seems to cause problems with a Javascript selector.

Any chance to achieve this without changing anything inside div.bannerCollection and without using display: contents;?

Answer 1

This design can be accomplished using flexbox. No need for display: contents.

Simply add display: flex to .bannerWrapper and .bannerCollection. Remove display: table-cell from .bannerCollection .bannerUnit

I modified your fiddle here: https://jsfiddle.net/8pzsk0m2/5/

It's important to note browser support for display: contents is still fairly low, and depending on which browsers you are targeting, it may be wise to avoid its use until it's more widely supported. https://caniuse.com/#search=display%3A%20contents