Question

我有一个main div，可以one or two sub divs。当有两个子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。尝试删除我的示例小提琴中的第二个子div，您可以看到所需的结果。

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

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