Question

试图让三个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分别为float：left，center和right，但由于某些原因它们不会排队

Answer 1

您可以使用float:left或display:inline-block来实现此目的。试试这个片段

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

Answer 2

有很多方法，但是最容易获得水平布局的方法是将内部div元素显示为table-cell：

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

请注意，上面的选择器比尝试对内部div元素进行分类更有用。

要将它们均匀地分散，需要多做一些工作。您需要更改容器div的显示。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你可以按照你想要的方式看看它。

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; */
}

Answer 4

浮动中心不存在。你应该在这里上课而不是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是另一种方式，但尚未跨浏览器。

Answer 5

最好是使用bootstrap网格系统

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

如何使三个div水平排列

5 个答案: