试图让三个 div 对齐。这就是我正在使用的东西
<div id="final_space">
<div id="sub_cat_1">About</div>
<div id="sub_cat_2">Contact</div>
<div id="sub_cat_3">F.A.Q.</div>
</div>
我尝试让每个 sub_cat 的 css 分别为浮动：left、center 和 right，但由于某种原因它们不会对齐
【问题讨论】：
float 是一种传统的内联元素方法，但它可能很难管理。它会弄乱容器以及随后的元素。有关更新的解决方案，请参阅下面的答案。
您可以使用float:left 或display:inline-block 来实现此目的。
试试这个sn-p
.sub-cat {
float: left;
background: #ccc;
padding: 5px 10px;
margin-right: 10px;
}<div id="final_space">
<div class="sub-cat" id="sub_cat_1">About</div>
<div class="sub-cat" id="sub_cat_2">Contact</div>
<div class="sub-cat" id="sub_cat_3">F.A.Q.</div>
</div>【讨论】：
有很多方法，但最容易获得水平布局的方法是将内部div元素显示为table-cell：
div#final_space>div {
display: table-cell;
}
请注意，上面的选择器比尝试对内部 div 元素进行分类更有用。
要均匀分布它们需要更多的工作。您需要更改容器div的显示。
div#final_space {
display: table;
width: 100%;
table-layout: fixed;
}
这适用于所有当前的浏览器，甚至 IE8。
div#final_space>div {
display: table-cell;
/* For visibility only: */
text-align: center;
border: thin solid #999;
}
div#final_space {
display: table;
width: 100%;
table-layout: fixed;
}<div id="final_space">
<div id="sub_cat_1">About</div>
<div id="sub_cat_2">Contact</div>
<div id="sub_cat_3">F.A.Q.</div>
</div>【讨论】：
你可以看看你想要的样子。
http://jsfiddle.net/d4kVk/179/
div { height: 45px; }
div.side {
background-color: skyblue;
width: 72px;
float: left;
}
div#range {
background-color: tomato;
width: 216px;
float: left;
}
span {
width:100%;
text-align: center;
display: block;
margin: 3px auto;
/* background-color: gold; */
}
【讨论】：
浮动中心不存在。你应该在这里上课而不是div。你可以通过多种方式做到这一点。第一种方式：
.sub_cat {
float: left;
width: 33.3333%;
}
.final_space:before,
.final_space:after {
content: "";
display: table;
}
.final_space:after {
clear: both;
}
.final_space {
*zoom: 1;
}
或者，您可以使用内联块来执行此操作。
.sub_cat {
display: inline-block;
margin-left: -4px;
}
Flexbox 是另一种方式，但尚未跨浏览器。
【讨论】：
最好是使用引导网格系统
<div id="final_space" class="row">
<div class="col-sm-4" id="sub_cat_1">About</div>
<div class="col-sm-4" id="sub_cat_2">Contact</div>
<div class="col-sm-4" id="sub_cat_3">F.A.Q.</div>
</div>
【讨论】：