CSS内嵌块元素换行时，父包装不适合新的宽度
如果内容线由于屏幕宽度而断裂，如何获得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>
你不能。 默认情况下，内联块有一个缩小到适合的宽度 ：
缩小到适合的宽度是：
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事件监听器，并手动设置所需的宽度。
