当内联块元素换行时，父包装器不适合新宽度。
当内联块元素换行时，父包装器不适合新宽度。
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>
#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>
泛舟湖上清波郎朗2回答
-
慕村225694
你不能。默认情况下，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事件侦听器，并手动设置所需的宽度。 -
桃花长相依
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项将被包装到下一行。
随时随地看视频慕课网APP
Html/CSS
Html5
CSS3