1

例如，如果我想要一个每行 3 列的网格，并且还想确保行中的每个项目都具有相同的高度，而不必专门设置它（想想<table>）......

例子：

3 列网格示例

...我可以使用像这样的标记（如下）并使用display带有值的 CSS 属性table-row和table-cell：

<div class="table-row">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div>

至于两列，这会做：

<div class="table-row">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div>

我的问题是：如何创建一个响应式网格，根据屏幕尺寸从 3 列缩小到 2 列和 1 列，并且还确保行中的所有项目都具有相同的高度，而无需我设置它特别是（如在 a 中<table>）？

注意：使用什么 CSS 属性或如何修改 HTML 标记并不重要。如果您只有一个想法，请随时在评论中分享，以便我进行试验并在可行的情况下分享答案。

PS：我找不到执行此操作的框架。大多数从 3 缩放到 1，或者即使他们使用 3-2-1（使用float），它们也不会保持行中项目的相同高度，这在我的设计中至关重要。

4

1 回答 1

0

由flexbox解决。我可以用吗

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
body {
  background-color: #333;
}
.container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -o-box-orient: horizontal;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: distribute;
  -moz-box-pack: distribute;
  -o-box-pack: distribute;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.container__item {
  min-width: 200px;
  margin: 10px;
  background-color: #fff;
  max-width: 300px;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.container__img {
  object-fit: cover;
  width: 100%;
}
.container__title,
.container__content {
  opacity: 0.99;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
  filter: alpha(opacity=99);
}
<div class="container">
  <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/>
    <div class="container__title">Title</div>
    <div class="container__content"> Lorem ipsum </div>
  </div>
  <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/>
    <div class="container__title">Title</div>
    <div class="container__content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet molestias excepturi omnis expedita, aliquid laborum in est tempore velit qui aspe illum fugiat enim!</div>
  </div>
  <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/>
    <div class="container__title">Title</div>
    <div class="container__content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet molestias excepturi omnis expedita, aliquid laborum in est tempore velit qui aspernatur consectetur consequatur soluta quis alias possimus illum fugiat enim!</div>
  </div>
  <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/>
    <div class="container__title">Title</div>
    <div class="container__content"> Lorem </div>
  </div>
  <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/>
    <div class="container__title">Title</div>
    <div class="container__content"> Lorem</div>
  </div>
</div>

于 2015-04-08T03:35:38.083 回答