时间戳

首页 > 解决方案 > 水平对齐 div 并完全适合父级的宽度

html - 水平对齐 div 并完全适合父级的宽度

问题描述

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

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

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

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

标签： htmlcss

解决方案

问题在于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>

我使用OBSbox-sizing是因为我也在border元素上使用过。框大小使边框包含在元素的宽度中。不在它之外。这与您的情况无关，但我用它来分隔元素。

推荐阅读