javascript - CSS使div自动 float

Question

我有一个主div，下面可以有一个或两个子div。当有两个子 div 时，我希望它们并排显示。但是如果我只有一个子 div，那么我希望它显示在中心。这可以通过使用 CSS 来实现还是我应该借助 JavaScript？使用以下 CSS，我能够实现它的并排部分。但是当只有一个子 div 时，我不确定如何前进

HTML:

<div id="maindiv">
    <div class="subdiv">
        <p>Div One</p>
    </div>

    <div class="subdiv">
        <p>Div Two</p>
    </div>
</div>

CSS:

div.subdiv {
    float: left;
    padding: 20px;
}

div#maindiv {
    border: 2px solid black; 
    height: 120px;
    width: 200px;
}

Answer 1

使用 display:inline-block 而不是 float:left。尝试删除我的示例 fiddle 中的第二个子 div，您可以看到所需的结果。

div.subdiv {
display:inline-block;
padding: 20px;
}

div#maindiv {
border: 2px solid black; 
height: 120px;
width: 200px;
text-align:center;
}

DEMO