我最近意识到我们不能在容器内水平对齐多个div - 没有它们之间的空间,也没有使用float。无法将多个div水平堆叠在一起而不浮动?
我将inline-block
应用于容器元素中的div,并给他们width
的%
。但似乎有一些额外的空间。我知道这是因为隐藏的角色。请参阅下图像 - 红线是容器的
我想用inline-block
,使它象下面的图片,并采取了容器的整个宽度。我不能将flexbox用于父级,因为我想让它响应并在断点后隐藏/重新定位某些元素。我也不想使用浮动,因为它将外部div拉出并使容器元素无用。另外,删除空格和制表符以使其工作是没有意义的......在那里输入代码会很麻烦。
现在来吧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>
只需删除'div'之间的空格。 –
http://stackoverflow.com/q/5078239/483779 – Stickers
@PraveenKumar这是我不想做的事......我看到了这些答案。安排代码将会非常困难。我无法用笨拙的格式编码 –