Question

我有一个非常简单的页面，其中包含一系列div，它们彼此相邻，包含图像和一些文本。图像的方向和不同的文本量意味着每个div都会变成不同的高度。如果没有手动设置高度，有没有办法让每个div匹配最高的一个高度，同时保持响应式布局？我尝试将它们包装在一个容器中并使用display：flex来完成这个技巧，但它杀死了响应式布局 - div不再允许根据浏览器大小重置其宽度，因此页面无法正常回流。

我在网上发现了一些jquery示例，但由于我不知情的原因，我无法让它们工作。如果有人有解决方案，我总是可以再试一次。

目前页面的基本布局是：

@charset "utf-8";

* {
  box-sizing: border-box;
}
[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
  text-align: center;
}
.clear {
  clear: both
}
html {
  font-family: Verdana, Geneva, sans-serif;
}
p {
  font-size: 11px
}
a,
a:hover,
a:active,
a:visited {
  color: #ffffff;
}
a.textlink,
a.textlink:hover,
a.textlink:active,
a.textlink:visited {
  color: #000000;
}
/* For mobile phones: */

[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-m-1 {
    width: 50%;
  }
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 20%;
  }
}
img {
  max-width: 100%;
  height: auto;
}

<div class="container">
  <div class="col-1 col-m-1">
    <img src="some/image/path" /><br />
    Some text<br />And more text
  </div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" /><br />
    Some text<br />And more text
  </div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" /><br />
    Some text<br />And more text
  </div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" /><br />
    Some text<br />And more text
  </div>
  <div class="col-1 col-m-1">
    <img src="some/image/path" /><br />
    Some text<br />And more text
  </div>
  <!-- and so on. The divs will, once I have this layout sorted, be
    populated by XML/XSL and could be anywhere from 1 to over 200 of them. -->
</div>

我发现如果没有单独的类col-m-1，基于平板电脑的布局将无效。（我对响应式布局并不是特别有经验，所以按照推荐这种方式的W3C教程进行操作）

Answer 1

你在flex的正确道路上 - 我想你错过的就是为你的容器添加flex-wrap：

＆＃13;

SetShellVarContext current
Delete "$DESKTOP\SchoolServer *.lnk"
SetShellVarContext all

＆＃13;

@charset "utf-8";

/* CSS Document */

.container {
  display: flex;
  flex-direction: rows;
  flex-wrap: wrap;
}
* {
  box-sizing: border-box;
}
[class*="col-"] {
  padding: 15px;
  border: 1px solid red;
  text-align: center;
}
.clear {
  clear: both
}
html {
  font-family: Verdana, Geneva, sans-serif;
}
p {
  font-size: 11px
}
a,
a:hover,
a:active,
a:visited {
  color: #ffffff;
}
a.textlink,
a.textlink:hover,
a.textlink:active,
a.textlink:visited {
  color: #000000;
}
/* For mobile phones: */

[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-m-1 {
    width: 50%;
  }
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 20%;
  }
}
img {
  max-width: 100%;
  height: auto;
}

＆＃13;

我已添加上面的容器类，并从col类

中删除了float

设置div高度与最高版本相同，同时保持响应式布局

1 个答案: