CSS Grid可以实现这种布局。

Question

如果由于屏幕宽度导致内容换行，如何使inline-block元素适合其内容宽度？

<!-- parent inline-block -->
<div style='display: inline-block;'>
    <div style='display: inline-block; width:200px;'></div>
    <!--
        If this child line breaks, 
        two 200px wide blocks are stacked vertically.
        That should make the parent width 200px,
        but the parent stays much wider than that
    -->
    <div style='display: inline-block; width:200px;'></div>
</div>

我无法想到如何对问题进行说法，因此听起来很简单，但我将一个简单的 JSFiddle 说明。

#wide {
  position: relative;
  width: 100%;
  border: 1px solid black;
  padding: 5px;
}
#narrow {
  position: relative;
  width: 175px;
  border: 1px solid black;
  padding: 5px;
}
.wrap {
  display: inline-block;
  border: 1px solid green;
  margin: auto;
}
.inlineblock {
  display: inline-block;
  vertical-align: top;
  background: red;
  min-width: 100px;
  min-height: 100px;
  border: 1px solid black;
}

<section id='wide'>
  <div class='wrap'>
    <div class='inlineblock'></div>
    <div class='inlineblock'></div>
  </div>
</section>
<p>
  When the red inline-blocks are forced to line break, how do you make a parent with display:inline-block (the green border) snap to fit? How do you get rid of all the extra horiztonal space in the lower green bordered div?
</p>
<section id='narrow'>
  <div class='wrap'>
    <div class='inlineblock'></div>
    <div class='inlineblock'></div>
  </div>
</section>

Answer 1

你做不到。默认情况下，inline-block元素具有shrink-to-fit width：

收缩配合宽度为：
min(max(preferred minimum width, available width), preferred width)。

然后，

当preferred minimum width <= preferred width <= available width时，宽度将为preferred width，如您所愿。
当available width <= preferred minimum width <= preferred width时，宽度将为preferred minimum width，如您所愿。
当preferred minimum width <= available width <= preferred width时，宽度将为available width，即使您不喜欢它。

如果你真的不想这样，我想你可以用JS添加一个resize事件监听器，并手动设置所需的宽度。

Answer 2

inline-block元素无法实现此布局 - 如@Oriol所示 - 但是，

CSS Grid可以实现这种布局。

body {
  margin: 0;
}

ul {
  display: inline-grid;
  grid-template-columns: repeat(auto-fit, 100px);
  min-width: 50vw;
  
  /* decorative properties */
  grid-gap: 10px;
  padding: 0;
  list-style: none;
  border: 5px solid salmon;
  box-sizing: border-box;
  
  /* center the grid */ 
  position: relative;
  left: 50vw;
  transform: translateX(-50%);
}
li {
  background-color: lightblue;
  height: 100px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
</ul>

Codepen demo（请务必调整大小）

基本上相关的代码归结为：

ul {
  display: inline-grid; /* (1) */
  grid-template-columns: repeat(auto-fit, 100px); /* 100px = column width - (2) */
  min-width: 50vw; /* or any user-defined min-width (3) */
}

1）使容器元素成为内联网格容器。这将导致网格“收缩 - 包裹”其内容 - 这样网格宽度永远不会比它的内容宽。

2）使用响应式布局设置网格（auto-fill / auto-fit值用于响应式布局）。如果连续没有空间来装入下一个项目 - 它将换行到下一行。

当响应式布局与内联网格一起使用时，网格宽度将等于网格中一个项目的宽度。（当没有明确设置宽度/最小宽度时 - like this）

3）使用最小宽度设置容器，该最小宽度表示（最多 - 一个部分项目小于）容器的所需最大宽度。

因此，如果给定的最小宽度恰好适合一定数量的项目 - 这意味着这也将是网格的最大宽度，因为下一个项目将换行。

然而，如果最小宽度与'n'项的宽度不完全对应，因为它也适合于第n + 1项的一部分 - 在这种情况下，网格将略微扩展以完全适合n +第1项 - 第n + 2项包装到下一行。

当内联块元素换行时，CSS包装器不适合新的宽度

2 个答案:

CSS Grid可以实现这种布局。

Codepen demo（请务必调整大小）