这个问题在这里已有答案:
我试图水平对齐4个div,但我希望每个div填充父级宽度的25%,这样他们就完全填写了父级宽度 .
你可以在这里看到我的尝试:https://techsource.dk/query/combine.php
我有4个宽度为250px的div,没有填充,边距和边框,在1000px宽度父级内,但250px div中只有3个适合父级 .
如果我将子项的宽度设置为240px或更低,它们将适合父项,但我不明白为什么4x250px宽度div不能适合1000px宽度父项?我用chrome检查了它,浏览器似乎正确理解了它 .
6 回答
您使用
inline-block
将div放在同一行 . 如果代码中有空格,则会在标记之间添加空格 . 尝试在子容器上使用float:left
,或者更恰当地说,在容器中使用display:flex
:因为你有 inline-block to the 4 child elements creates a gap in between the inline-block elements .
所以要通过代码删除它,只需设置
到宽度为 1000px 的div,它将解决您的问题 .
问题在于
inline-block
显示样式 . 它会在元素之间添加空白区域 .引用StackOverflow上另一个问题的评论:inline-block
我还建议你不要在子元素上使用固定的px宽度 . 但使用百分比 . 这样你肯定他们将永远保持在一排4 .
FlexBox是设计样式时的方法 . 它易于使用和理解 . 在这里查看文档 - > FlexBox
话虽如此,请查看下面的代码段
OBS我使用
box-sizing
因为我也在元素上使用了border
. 框大小调整使边框包含在元素的宽度中 . 不在它之外 . 它在你的情况下是无关紧要的,但我用它来分离元素 .包含你在宽度1000px处设置的div - 在其上放置一个类来定位它,例如
如果在子div上使用box-sizing:border-box,则可以在1000px容器中容纳4个250px宽度的div . 这包括填充和div宽度的边框,否则它们将溢出到新行 .
我同意@Ruddle使用
flex
,因为它在实现漂亮的布局时更加优雅和灵活 .这是我创建的一个例子https://codepen.io/anon/pen/VEgegK