Question

我有以下HTML。我需要垂直对齐.faf文本字段而不使用表格。

<div id="faf-field-2" class="faf-field faf-field-input ">
<div class="faf-name"> Vendor </div>
<div class="faf-text"> Brocade </div>
</div>
<div id="faf-field-6" class="faf-field faf-field-input ">
<div class="faf-name"> Platform </div>
<div class="faf-text"> ADX </div>
</div>
<div id="faf-field-7" class="faf-field faf-field-input ">
<div class="faf-name"> Version </div>
<div class="faf-text"> 12.4 </div>
</div>

布局的示例如下：

Vendor   Brocade
Platform ADX
Version  12.4

由于

Answer 1

只需使用

float: left

这两个班级。一个例子：

.faf-name{
width: 200px;
float: left;
/* other CSS may come here */
}

以同样的方式，

.faf-text{
width: 200px;
float: left;
/* other CSS may come here */
}

如果你提供了jsfiddle，会更容易和更清楚。希望这对你有用

Answer 2

您可以使用CSS display: table使您的元素像表格一样。

对容器display: table-row;标记使用<div>，使其内部元素的行为类似于<tr>和display: table-cell;，使其行为类似于<td>。

这样的事情：

.faf-field-input{
    display: table-row;
}
.faf-field-input div{
    display: table-cell;
}
.faf-name{
    width: 80px; /*for testing*/
}

<强> jsFiddle DEMO

Answer 3

只需使用此css属性，即使faf-text字段相互垂直，而不使用表格。

.faf-field{display:table-cell;}

<强> DEMO

Answer 4

从您的代码中，我看到您正在显示表格数据。

所以使用桌子非常好。

在html中垂直对齐div

4 个答案: