css - 使用 CSS3 水平对齐 div

Question

这是我的代码。我将这些 div 设为表格单元格

<div class="logo">
text
</div>

<div class="stats" >
text
</div>

和我的 CSS

.logo
{
    display:table-cell;
    width:420px;
}

.stats
{
    display:table-cell;
    width:200px;
}

是否可以在不使用浮点数的情况下以某种方式将第一个 div 向左对齐，第二个向右对齐？或者只是为了将其中的内容左右对齐？

score 3 · Accepted Answer

有比使用像 table-cell 这样晦涩的显示方法更简洁的方法来解决这个问题 - 通常您可以使用block、inline或inline-block. 你在做什么需要表格单元格？

话虽如此，您可以做一些事情。要在这些元素内对齐文本或内联内容，只需text-align-left或right. 如果您要嵌套 div，则可以应用类似.logo *{ float: left; }.

我不熟悉表格单元格显示的动态，但是如果您想在不使用浮动的情况下进行定位，通常您可以position: absolute;使用left: 0px;and right: 0px;。但是，这有其自身的一系列问题。

score 1 · Accepted Answer

另一方面，您可以使用带有浮动的填充来创建表格的伪效果，并且“填充 + 边距 + 约束 div”被证明是对我来说最好的对齐属性......虽然这可能无法解决您的“没有浮动“ 问题。

2 回答 2