代码之家 › 专栏 › 技术社区 › user2354302

CSS使div自动浮动

css-float css html jquery javascript

1

user2354302 · 技术社区 · 11 年前

我有一个 main div 在下面可以 one or two sub divs 。当有两个子div时,我希望它们并排显示。但是如果我只有一个子div,那么我希望它显示在中心。这可以通过使用CSS实现吗?还是应该借助JavaScript?使用下面的CSS,我能够实现它的并行部分

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;
}

1 回复 | 直到 11 年前

1

8

Suresh Ponnukalai 11 年前

使用 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;
}