当行内块元素换行符时，父包装不适合新宽度
当行内块元素换行符时，父包装不适合新宽度
提问于 2016-01-25 23:04:51
如果内容因为屏幕宽度而换行，如何让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>
回答 1
Stack Overflow用户
发布于 2018-06-06 18:58:25
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+1th项的一部分-在本例中，网格将略微扩展以完全适合n+1th项- n+2th项将换行到下一行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34995740
复制相关文章
相似问题
腾讯云开发者
