如何防止柔韧性图像相互重叠？

Question

我已经使用PouchDB / JS创建了一个管理页面，用于将内容上传到数据库，以便将其显示在另一个页面上，但是当项目上载到主页时，它们在调整页面大小时会彼此重叠，和/或尽管

也不要落入另一列

flex-wrap: wrap;

在容器中使用。我的JS在主页上创建了新条目，因此代码并不完全相同，但是我创建了一些具有相同图像的div来演示该问题。在网页上看起来不错，但这是页面调整大小时会发生的情况：

这类似于我要实现的目标：

我希望所有图像都是固定大小的（占容器的三分之一）（即使上传的图像尺寸不同），并且当页面缩小时，我希望这些框彼此重叠（所以在移动设备上，每列只有1张图片）

有人可以看一下我的代码，然后让我知道如何解决我的问题吗？

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0;
  font-family: 'Raleway', georgia, arial;
  background-color: #e0e0e0;
  text-align: center;
}

h1 {
  color: #aaaaaa;
  text-align: left;
}

.sortFilms {
  text-align: left;
  display: inline-block;
  background-color: #ff6699;
  width: 80%;
  padding: 20px;
}

header {
  text-align: center;
  display: inline-block;
  border-bottom: 5px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-color: #aaaaaa;
  width: 80%;
  padding: 20px;
  background-color: #e0e0e0;
}

.filmRow img {
  min-width: 200px;
  width: 200px;
  border-radius: 20px;
}

.filmRow {
  flex-direction: column;
  text-align: center;
  width: 33%;
  padding: 10px;
}

#filmContainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.sorting {
  width: 20%;
}

h2 {
  font-weight: 700;
  font-size: 2em;
  width: 50%;
  color: #AAAAAA;
}

#formTitle {
  margin-top: 0;
  margin-bottom: 0;
}

<header>
  <img src="img/rv-logo.png">
  <p class="tagline">Want to know whether or not it's worth paying to watch a certain film or not? See what we think first!</p>
</header>

<div class="sortFilms">
  <h2 id="formTitle">Browse reviews</h2>
  <p class="sorting"> Sort by:
    <label>Ascending <input type="radio" name="sort" checked/></label>
    <label>Descending <input type="radio" name="sort"/></label>
  </p>
  <div id='filmContainer'>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>

  </div>
</div>

Answer 1

我看到您将填充应用于flex child。

解决方案很简单。将box-sizing: border-box;应用于.filmRow。

原因是您在设置.filmRow的{​​{1}}的同时添加了填充。

width: 33%使包括填充在内的整个box-sizing: border-box;成为div。

https://codepen.io/blackcityhenry/pen/ZwzOXa

编辑：

并且由于width: 33%被设置为父级的33％。如果没有width，则flex子元素将不会自动换行，因为33％始终是相对单位。

Answer 2

尝试从.filmRow img删除最小宽度

.filmRow {
 -webkit-flex-flow: row wrap;
  justify-content: space-around;
}
.filmRow img {
  max-width: 200px;
  width: 100%;
  margin: 10px;
  border-radius: 20px;
}

---

工作演示

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0;
  font-family: 'Raleway', georgia, arial;
  background-color: #e0e0e0;
  text-align: center;
}

h1 {
  color: #aaaaaa;
  text-align: left;
}

.sortFilms {
  text-align: left;
  display: inline-block;
  background-color: #ff6699;
  width: 80%;
  padding: 20px;
}

header {
  text-align: center;
  display: inline-block;
  border-bottom: 5px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-color: #aaaaaa;
  width: 80%;
  padding: 20px;
  background-color: #e0e0e0;
}

 .filmRow {
 -webkit-flex-flow: row wrap;
  justify-content: space-around;
}
.filmRow img {
  max-width: 200px;
  width: 100%;
  margin: 10px;
  border-radius: 20px;
}

#filmContainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.sorting {
  width: 20%;
}

h2 {
  font-weight: 700;
  font-size: 2em;
  width: 50%;
  color: #AAAAAA;
}

#formTitle {
  margin-top: 0;
  margin-bottom: 0;
}

<header>
  <img src="img/rv-logo.png">
  <p class="tagline">Want to know whether or not it's worth paying to watch a certain film or not? See what we think first!</p>
</header>

<div class="sortFilms">
  <h2 id="formTitle">Browse reviews</h2>
  <p class="sorting"> Sort by:
    <label>Ascending <input type="radio" name="sort" checked/></label>
    <label>Descending <input type="radio" name="sort"/></label>
  </p>
  <div id='filmContainer'>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>

  </div>
</div>