时间戳

首页 > 解决方案 > 如何阻止 flex 图像相互重叠？

javascript - 如何阻止 flex 图像相互重叠？

问题描述

我创建了一个管理页面，使用 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>

标签： javascripthtmlcssflexbox

解决方案

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

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

原因是您在向其添加填充时设置了.filmRow's 。width: 33%

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

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

编辑：

并且由于width被设置为父级的 33%。没有min-width, flex child 将不会换行，因为 33% 始终是一个相对单位。

推荐阅读