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

我为你创造了一个小提琴：http://jsfiddle.net/wfrcG/3/

CSS中有没有办法在没有javascript的情况下实现这一目标？

Answer 1

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

EXAMPLE HERE

#div2:empty {
    margin:0;
}