Question

我最近意识到我们无法在容器内水平对齐多个div - 它们之间没有空格而且没有使用float。

我将inline-block应用于容器元素内的div，并在width中将它们%。但似乎有一些额外的空间。我知道这是因为隐藏的角色。请参阅下图 - 红线是容器的

我希望使用inline-block将其设置为下图，并占据容器的整个宽度。我不能将flexbox用于父级，因为我想让它响应并在断点之后隐藏/重新定位一些元素。我也不想使用浮点数，因为它会将div拉出来并使容器元素无用。此外，删除空格和制表符以使其工作毫无意义......在那里键入代码会很麻烦。

现在来看CSS，必须有一些东西。它不应该是令人沮丧的，CSS不应该是这个愚蠢的。

这是我的代码，

.container{
	width: 100%;
	height: auto;
}

.section{
	display: inline-block;
}

.homebar{
	width: 24%;
	height: 600px;
	background-color: #222;
}
.content{
	width: 50%;
	min-width: 500px;
	height: 600px;
	background-color: #fbfbfb;
}
.sidebar{
	width: 24%;
	height: 600px;
	background-color: #158;
}

<div class="container">

<!-- Home/Menu Bar-->
<div class="section homebar">

</div>

<!-- Content Area -->
<div class="section content">

</div>

<!-- Sidebar Area -->
<div class="section sidebar">

</div>

</div>

Answer 1

要放置为remove space的元素之间inline-block，请在font-size:0px中设置parent div或第二个选项标记negative margin的使用，如下所示，

＆＃13;

#container{
  width:100%;
  height:auto;
  overflow:hidden;
  border:2px solid red;
  font-size:0px;
}
#container > .homebar{
width:33.2%;
height:200px;
display:inline-block;
background:yellow;
}
#container > .content{
width:33.3%;
height:200px;
display:inline-block;
background:green;
}
#container > .sidebar{
width:33.3%;
height:200px;
display:inline-block;
background:blue;
}

＆＃13;

<div id="container">
<!-- Home/Menu Bar-->
<div class="section homebar">
</div>
<!-- Content Area -->
<div class="section content">
</div>
<!-- Sidebar Area -->
<div class="section sidebar">
</div>
</div>

＆＃13;

Answer 2

我最近遇到过这个问题，我发现当使用内联块来对齐div时。由于font-size，浏览器HTML会自动在每个div块的右侧添加默认边距。我在我的场景中找到的唯一解决方案是通过在我们具有样式display:inline-block;的div上添加-4px（由于默认字体大小而由浏览器使用的默认空间）添加右边距修复来加入div。

所以，只需将margin-right:-4px;添加到您的.section课程即可。

您也可以在font-size:0px;类上使用.container来实现此目的，但这会强制您重置容器中每个元素的字体大小，这就是我使用边距的原因调整解决方案。

希望这有帮助。

Answer 3

你得到这些差距的原因是因为div的字体大小。请注意解决方案：

＆＃13;

div {
  border: 1px solid black;
  font-size: 0;
}

.container{
	width: 100%;
	height: auto;
}

.section{
	display: inline-block;
}

.homebar{
	width: 24%;
	height: 600px;
	background-color: #222;
}
.content{
	width: 50%;
	min-width: 500px;
	height: 600px;
	background-color: #fbfbfb;
}
.sidebar{
	width: 24%;
	height: 600px;
	background-color: #158;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">

<!-- Home/Menu Bar-->
<div class="section homebar">

</div>

<!-- Content Area -->
<div class="section content">

</div>

<!-- Sidebar Area -->
<div class="section sidebar">

</div>

</div
</body>
</html>

＆＃13;

基本上，我总是在页面中使用normalize从一开始就解决问题。

没有浮动，不能将多个div水平堆叠在一起？

3 个答案: