Html 如何使三个div水平排列

试着让三个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>

关于
接触
F.A.Q。

---

我已经尝试将每个sub_cat的css设置为浮动：左、中、右，但由于某些原因，它们不会对齐，最好使用引导网格系统

 <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>

关于
接触
F.A.Q。

你可以看看你想要的样子

---

您可以使用

float:left

或

display:inline block

来实现这一点。 试试这个片段

.sub-cat{
浮动：左；
背景：#ccc；
填充物：5px10px；
右边距：10px；
}

关于
接触
F.A.Q。

有很多方法，但是获得水平布局的最容易管理的方法是将内部

div

元素显示为

表格单元格

：

div#final_space>div {
    display: table-cell;
}

请注意，上面的选择器比尝试对内部

div

元素进行分类更有用

要将它们均匀分布，需要多做一点工作。您需要更改容器的显示

div

div#final_space {
    display: table;
    width: 100%;
    table-layout: fixed;
}

这适用于所有当前浏览器，甚至IE8

div#final_space>div{
显示：表格单元格；
/*仅用于可见性：*/
文本对齐：居中；
边框：薄实线#999；
}
分区#最终空间{
显示：表格；
宽度：100%；
表布局：固定；
}

关于
接触
F.A.Q。

浮动中心不存在。你应该在这里上课，而不是分区。你可以用很多方法来做。第一种方式：

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

或者，您也可以使用inline块这样做

.sub_cat {
     display: inline-block;
     margin-left: -4px;
   }

---

Flexbox是另一种方式，但还没有跨浏览器。

请也显示css代码。使用时，您可以参考此stackoverflow线程可能的重复项。虽然

float

是内联元素的传统方法，但它可能很难管理。它会把容器和随后的元素弄得一团糟。请参阅下面的答案，以获得更当前的解决方案。您强迫他使用引导的解决方案是“错误的”。他没有给bootstrap贴标签。需要一个纯HTML/CSS解决方案。我认为这是一个输入错误：最糟糕的是使用引导…

.sub_cat {
     display: inline-block;
     margin-left: -4px;
   }