Question

我正在尝试水平对齐4个div，但我希望每个div都能填充父级宽度的25％，这样它们就可以完美地填充父级宽度。

您可以在这里看到我的尝试：https://techsource.dk/query/combine.php

我在1000px宽度的父级中有4个宽度为250px的div，没有填充，边距和边框，但是在250px div中只有3个适合于父级。

如果我将子级的宽度设置为240px或更小，它们将适合父级，但是我不明白为什么4x250px的div不能适合1000px的父级？我用chrome检查了它，浏览器似乎正确理解了它。

Answer 1

如果在子div上使用box-sizing：border-box，则可以在1000px的容器中容纳4 250px宽度的div。这包括div宽度中的填充和边框，否则它们将溢出到新行。

info.plist

.parent{
   width:1000px;
   border:solid green 4px;
}

.child{
   border:solid darkblue 1px;
   background:lightblue;
   width:250px;
   height:300px;
   float:left;
   box-sizing:border-box;
}

.parent::after{
   content:" ";
   display:table;
   clear:both;
}

Answer 2

您使用inline-block将div放在同一行上。如果您的代码中包含空格，则会在标签之间添加空格。尝试对孩子使用float:left，或者更合适地在容器中使用display:flex：

.container
{
    display:flex;
    width:1000px;
}

Answer 3

包含已设置为宽度1000px的div-在其上放置一个类来定位它，例如

.containerswrapper {
   display:flex;
}

div[id^=Container] {
   flex: 0 0 25%;
/* which is short for : 1. don't grow, 2. don't shrink, basis width 25% */
}

Answer 4

由于您有内嵌到4个子元素的行，在内嵌块的元素之间创建了一个空白。

要通过代码将其删除，只需设置

font-size: 0px;

到宽度为 1000px 的div，它将解决您的问题。

Answer 5

问题在于inline-block的显示样式。它会在元素之间添加空格。

内联格式设置上下文中的元素将导致回车符中的空格和HTML中的空格

在此处对StackOverflow上的另一个问题的评论中引用：inline-block

我还建议您不要在子元素上使用固定的px宽度。但是使用百分比。这样一来，您可以确保它们始终保持4排。

FlexBox是样式化布局时的一种方法。它非常易于使用和理解。在此处检查文档-> FlexBox

话虽如此，请查看下面的代码段

.parent {
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
}
.child {
  flex: 0 25%;
  height:100px;
  background:red;
  border:1px solid green;
  box-sizing:border-box;
}

<div class="parent">
  <div class="child">

  </div>
  <div class="child">

  </div>
  <div class="child">

  </div>
  <div class="child">

  </div>
</div>

OBS 我使用了box-sizing，因为在元素上也使用了border。框大小可将边框包括在元素的宽度中。不在外面。与您的情况无关，但是我用它来分隔元素。

Answer 6

我同意@Ruddle使用flex，因为它在实现美观的布局方面更优雅，更灵活。

这是我创建的一个示例https://codepen.io/anon/pen/VEgegK

水平对齐div，使其完全适合父级的宽度

6 个答案: