css - 有没有办法让 2 或 3 或 4 div 共享容器 div 的相同空间

Question

这就是我试图实现的目标：div 以相等的比例共享相同的空间。三个 div 在彼此的右侧对齐。

<div>
    <div>
        <p>MyContentA</></p>
    </div>
    <div>
        <p>MyContentB</></p>
    </div>
    <div>
        <p>MyContentC</></p>
    </div>
</div>

我正在玩这种float风格，但我不知道它是如何工作的……它永远不会做我想要的，元素之间总是有一条新线：我希望它们并排。

Answer 1

CSS

.parent {width:300px; height:100px;}
.child {width:33%; float:left; height:100px; background-color:red;}
.child2 {width:33%; float:left; height:100px; background-color:green;}
.child3 {width:33%; float:left; height:100px; background-color:blue;}

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child2">2</div>
    <div class="child3">3</div>
</div>

示例：http: //jsfiddle.net/7uE84/

您还可以将子类更改为 1 个类...我刚刚制作了 3 个，因此您可以在该父 div 中看到所有 3 个。

Answer 2

CSS

div#container { width: 300px; height: 100px; }

div#container > div { float: left; width: 33%; height: 100%; }

/* Optional coloring */

div#one   { background: #ff0000; }

div#two   { background: #00ff00; }

div#three { background: #0000ff; }

HTML

<div id="container">

    <div id="one">
        One
    </div>

    <div id="two">
        Two
    </div>

    <div id="three">
        Three
    </div>

</div>