Question

有6列的网格。网格的每列是50px

Content 1: <section><p>hello</p></section>
Content 2: <section><img width="110"></section>
Content 3: <section><p>goodbye</p></section>
Content 4: <section><img width="250"></section>
Content 5: <section><img width="65"></section>

我希望这个内容以某种方式知道布局如下，而不是＆＃34;告诉＆＃34;每个内容占用多少列：

|----------|----------|----------|----------|----------|----------|
|          |                                |          |
| hello    | 110px-wide image               | goodbye  |
|          |                                |          |
|----------|----------|----------|----------|----------|----------|
|                                                      |
| 200px-wide image
|                                                      |
|----------|----------|----------|----------|----------|----------|
|                     |
| 65px-wide image     |
|                     |
|----------|----------|----------|----------|----------|----------|

在任何相当广泛支持的CSS中，有没有办法设置一个网格来实现这一点，而不会在每个节元素上附加任何col-x类型类或显式宽度？

我尝试使用flexbox的例子，但我不知道怎么告诉它＆＃34;网格列宽50px，其中有6列＆＃34;：

＆＃13;

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    align-items: space-between;
    align-content: center;
}
section {
    border: 1px black solid;
    flex-basis: auto;
    flex-grow: 6;
    flex-shrink: 1;
}

＆＃13;

<div class="grid">
  <section><p>hello</p></section>
  <section><img src="http://comefillyourcup.com/wp-content/uploads/2015/12/2880x1800-bright-ube-solid-color-background-128x128.jpg" width="110"></section>
  <section><p>goodbye</p></section>
  <section><img src="https://i.imgur.com/WgbsUUv.png" width="250"></section>
  <section><img src="https://i.imgur.com/SUl31R3.png" width="65"></section>
</div>

＆＃13;

Answer 1

您可以像这样简单地制作section内嵌块：

＆＃13;

.grid {
  display: flex;
  flex-wrap: wrap;
}

img {
  max-width: 100%;
}

section {
  display: inline-block;
  vertical-align:top;
  border: 1px solid #000;
  min-height: 100px;
}

＆＃13;

<div class="grid">
  <section>
    <p>hello</p>
  </section>
  <section><img src="http://coschedule.com/blog/wp-content/uploads/linkedin-recommended-image-sizes-770x884.png" width="410"></section>
  <section>
    <p>goodbye</p>
  </section>
  <section><img src="http://3.bp.blogspot.com/_w0r3cYUSD7A/Sob415afOVI/AAAAAAAABa4/-J_vkiTkITE/s1600/sunflare.jpg" width="1000"></section>
  <section><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Wide%2C_Samuel_1892.jpg/200px-Wide%2C_Samuel_1892.jpg" width="250"></section>
</div>

＆＃13;

CSS网格布局，但没有预先确定每个单元格的列数

1 个答案: