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

这里的例子

#div2:empty {
    margin:0;
}