有沒有辦法讓2或3或4個div共享一個容器div的相同的空間

Question

這是我試圖實現的：divs以相同的比例共享相同的空間。 三個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>