css - 如果 div 为空，则忽略边距

Question

我有 2 个 DIV，彼此水平对齐并使用包装器居中。 我使用 margin-right 将 DIV2 与 DIV1 分开。 DIV2 可能没有内容。如果 DIV2 没有内容，我希望忽略边距，让 DIV1 单独居中。

这是我的 CSS:

#div1 {
     display: inline-block;
     width: 100px;
     border: 1px solid #000000;
     margin-left: 200px;
}
#div2 {
     display: inline-block;
}

这是 HTML:

<div style="text-align:center;">
     <div id="div1">Div1</div>
     <div id="div2"></div>
</div>

我创建了一个 fiddle 供您使用:http://jsfiddle.net/wfrcG/3/

在 CSS 中是否有一种方法可以在没有 javascript 的情况下实现这一点？

Answer 1

您可以使用 :empty如果元素为空，则将边距设置为 0 的伪类。

EXAMPLE HERE

#div2:empty {
    margin:0;
}