如果内容因屏幕宽度而换行，如何获取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>




评论

您不能...那不是线盒模型的工作方式。
您可能还要将父div宽度设置为200px吗？
使用white-space：preline可以消除多余的宽度空间，但是它会强制行内块元素从一开始就换行。有没有办法只在换行符上使用行前空格？
我认为您应该搜索CSS Flex，这可能正是您所需要的。
@miguelmpn不，...甚至flexbox也不能做到这一点。

#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。

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

评论

@Paulie_D是的，浮点数也使用“缩小以适合”宽度（实际上是为它们定义的）。基本上所有原子内联级别的盒子都做同样的事情。

– ri
16年1月25日在16:11
谢谢...这也是我的理解。奇怪的是，这尚未解决...似乎是一个常见的设计要求。

–Paulie_D
16 Jan 25 '16：12


@Paulie_D也许是有意的，以避免宽度的突然更改和可能的圆形定义。但是，在非问题情况下使用此功能会很好。

– ri
16年1月25日在16:21
@Paulie_D顺便说一句，弹性项目使用max-content而不是fit-content / shrink-to-fit。我已经回答了：flex项目应该使flex容器溢出而不是换行吗？解释一下。

– ri
16 Jan 26'在0:44

#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演示（请务必调整大小）

相关代码基本上可以归结为：

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个项目包装到下一行。

评论

如果我们想容纳与父容器中一样多的100px列，可以使用min-width：calc（100％-100px）;

– Zeal
18/12/9在6:38
不幸的是，这似乎不适用于容器内具有动态宽度（例如带有文本）以及动态最大宽度的项目。如果我将每个单词都用一个跨度包起来，可能会有某种使用方式。

– addMitt
9月23日17:32