Question

我正在尝试制作一个主页，其中有3列的6个图像块。但也要使这6个块在移动视图上显示为2列。

我已经附上了一些我想要的图像以及正在使用的代码的图像。我尝试了不同类型的flex-wrap，但我无法使其正常工作。

这是jsfiddle的链接-https://jsfiddle.net/7frjmeat/

这是当前的桌面视图

这就是我希望移动视图看起来像的样子-

代码

html,
body,
a,
{
  width: 100%;
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 200%;
}

hr {
  width: 25%;
  height: 1px;
  background: #c6c6c6;
  border: none;
  outline: none;
  margin-bottom: 0.25%;
}

.logo {
  text-align: center;
  width: 20%;
  height: auto;
}

.logo img {
  width: 100%;
  height: auto;
  padding-top: 4%;
}

.flex {
  display: flex;
  max-width: 75%;
  width: 100%;
  height: 100%;
}

.flex div {
  flex: 1;
  padding: 2px;
}

.img1 {
  width: 100%;
  transition: all 0.3s;
  padding-top: 5%;
}

.img1:hover {
  transform: scale(1.03);
}

.line-break {
  width: 100%;
}

@media only screen and (max-width:768px) {
  .logo,
  .logo img {
    display: inline;
    width: 60%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .flex,
  .flex div,
  .img1,
  img:hover {
    transition: none !important;
    transform: none !important;
    max-width: 100%;
  }
  p {
    font-size: 150%;
    padding-bottom: 10px;
  }
  hr {
    margin-bottom: 5%;
  }
  .line-break {
    width: 0%;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">


  <div class="logo">
    <img src="https://via.placeholder.com/742x180" />
  </div>

  <hr>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
  </div>
  <div class="line-break"></div>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
  </div>

Answer 1

如果父div的宽度是灵活的，但是div内的内容不是必须的，则可以在图像类中使用display: inline-block。这将帮助您获得想要的效果。

示例实现为

<div class="main-container">
    <img class="inline-image" src="img1">
    ...
</div>

Answer 2

这只是一个基本示例；但是您可以使用Flexbox或CSS Grid来实现此行为，具体取决于您希望这些物品自行排列的方式。

Flexbox通常更适合一维布局，这意味着，当您希望项目沿一个方向（列或行）对齐时；而CSS Grid在处理二维布局时要容易得多，在二维布局中，您需要在两个方向上对齐项目。

看看：

body * {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-content: center;
  grid-gap: 15px;
  grid-auto-rows: minmax(100px, auto);
}

.grid-item {
  border: 1px solid black;
}

.flex {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-item {
  border: 1px solid blue;
  min-height: 100px;
  flex: 1 1 30%;
  margin: 5px;
}

@media (max-width: 590px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .flex-item {
    border: 1px solid blue;
    min-height: 100px;
    flex: 1 1 45%;
    margin: 5px;
  }
}

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

<div class="flex">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Answer 3

因此，您需要将所有元素放入一个flex框内，以使其真正影响整个组。另外，您需要为CSS设置断点，以知道一行中有多少个项目。我通常只使用最小宽度。

基本设置项目的宽度，使用框式调整大小以将填充包括在宽度中，使用flex-wrap包装内容，并将移动版本的宽度更改为两列布局。 **编辑，我还更改了HTML，将所有内容放入一个flex-box容器中。

以下是适用于您的布局的代码。授予它会丢失HR标签。

CSS

html,
body,
a {
  width: 100%;
  height: 100%;
  margin: 0;
}

p {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 200%;
}

hr {
  width: 25%;
  height: 1px;
  background: #c6c6c6;
  border: none;
  outline: none;
  margin-bottom: 0.25%;
}

.logo {
  text-align: center;
  width: 20%;
  height: auto;
}

.logo img {
  width: 100%;
  height: auto;
  padding-top: 4%;
}

.flex {
  display: flex;
  max-width: 75%;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  flex-basis: auto;
  justify-content: space-evenly;
}

.flex div {
  flex: 1;
  padding: 2px;
  min-width: 33%;
  box-sizing: border-box;
}

.img1 {
  width: 100%;
  transition: all 0.3s;
  padding-top: 5%;
}

.img1:hover {
  transform: scale(1.03);
}

.line-break {
  width: 100%;
}

@media only screen and (max-width:768px) {
  .logo,
  .logo img {
    display: inline;
    width: 60%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .flex,
  .flex div,
  .img1,
  img:hover {
    transition: none !important;
    transform: none !important;
    max-width: 100%;
  }
  p {
    font-size: 150%;
    padding-bottom: 10px;
  }
  hr {
    margin-bottom: 5%;
  }
  .line-break {
    width: 0%;
  }
  .flex div {
    min-width: 50%;
  }
}

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<center>
  <div class="logo">
    <img src="https://via.placeholder.com/742x180" />
  </div>

  <hr>
  <div class="flex">
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>

    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
    <div>
      <img src="https://via.placeholder.com/926x1104" class="img1" />
    </div>
  </div>

</center>

桌面视图中3列图像，移动视图中2列图像

3 个答案: