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

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元素具有收缩至配合宽度:

收缩到合适的宽度是：
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

  即使你不喜欢。

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

Answer 2

inline-block元素无法实现这种布局-正如@Oriol所演示的-但是，

CSS网格可以实现这种布局。

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演示(一定要调整尺寸)

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

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值用于响应布局)。如果一行中没有适合下一项的空间，它将包装到下一行。

当响应布局与内联网格一起使用时，网格宽度将等于网格的一个项的宽度。(当没有显式设置宽度/最小宽度时-像这样)

3)设置容器的最小宽度，该宽度表示(最多比所需的部分项少一项)。最大宽度为了容器。

因此，如果给定的最小宽度正好符合一定数量的项目，这意味着这也将是极大值网格的宽度，因为下一项将被包装。

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