Question

我们说我有两个div，divA和divB。根据收到的输入，这些div既可以显示，也可以不显示，也可以互相显示。如果它们都显示，我希望它们在父容器中间隔如下：

 -----------------------
|       A       B       |
 -----------------------

如果只显示一个，则应该居中：

 -----------------------
|           A           |
 -----------------------

这应该适用于＆＃39; n＆＃39;内联div的数量。我不想使用JS，只需要HTML / CSS。

最好的方法是什么？

Answer 1

您可以使用这样的简单代码：

<强> CSS：

.container {
    width: 120px;
    border: 1px dashed #555;
    height: 30px;
    text-align: center;
}

.A, .B, .C {
    display: inline-block;
    border: 1px solid #f00;
    width: 30px;
}

<强> HTML：

<div class="container">
    <div class="A">A</div>
    <div class="B">B</div>
    <div class="C">C</div>
</div>

删除div A，B或C将与其余部分对齐。

JSFiddle示例：http://jsfiddle.net/yu0n2ofb/

可变数量的内联div的一致间距

1 个答案: