2016-11-30 73 views
-3

我最近意识到我们不能在容器内水平对齐多个div - 没有它们之间的空间,也没有使用float。无法将多个div水平堆叠在一起而不浮动?

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

The red line is container's

我想用inline-block,使它象下面的图片,并采取了容器的整个宽度。我不能将flexbox用于父级,因为我想让它响应并在断点后隐藏/重新定位某些元素。我也不想使用浮动,因为它将外部div拉出并使容器元素无用。另外,删除空格和制表符以使其工作是没有意义的......在那里输入代码会很麻烦。

enter image description here

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

这里是我的代码,

.container{ 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 

 
.section{ 
 
\t display: inline-block; 
 
} 
 

 
.homebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #222; 
 
} 
 
.content{ 
 
\t width: 50%; 
 
\t min-width: 500px; 
 
\t height: 600px; 
 
\t background-color: #fbfbfb; 
 
} 
 
.sidebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t 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>

+1

只需删除'div'之间的空格。 –

+3

http://stackoverflow.com/q/5078239/483779 – Stickers

+0

@PraveenKumar这是我不想做的事......我看到了这些答案。安排代码将会非常困难。我无法用笨拙的格式编码 –

回答

0

我遇到了这个问题,最近和我发现了什么是使用inline-block的时候对齐的div。由于字体大小,浏览器HTML会自动在每个div区块的右侧添加默认边距。我在我的场景中找到的唯一解决方案是通过在div上添加-4px(由浏览器使用的默认空间,由于缺省字体大小)的右边距修正来加入div,我们的样式为display:inline-block;

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

你也可以在.container类上使用font-size:0px;来达到这个效果,但这会迫使你重置容器内每个元素的字体大小,所以这就是为什么我使用了margin调整解决方案。

希望这会有所帮助。

1

要元素之间remove space其放置为inline-block,设置font-size:0pxparent div或第二个选项标记使用的negative margin如下,

#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; 
 
}
<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>

0

你之所以得到这些差距因为div的字体大小。 请注意解决方案:

div { 
 
    border: 1px solid black; 
 
    font-size: 0; 
 
} 
 

 
.container{ 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 

 
.section{ 
 
\t display: inline-block; 
 
} 
 

 
.homebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #222; 
 
} 
 
.content{ 
 
\t width: 50%; 
 
\t min-width: 500px; 
 
\t height: 600px; 
 
\t background-color: #fbfbfb; 
 
} 
 
.sidebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #158; 
 
}
<!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>

基本上,我总是用normalize在我的网页,以解决从一开始的问题。