在一個容器div內浮動3個div

我試圖在一個容器div內浮動3個div。我認爲這很簡單，但我很難將它們均勻分開。由於我希望網站有一定的響應能力，所以我不能在px中指定空格。在一個容器div內浮動3個div

CSS：

#circlecontain{background-color:green;height:200px; width:1200px; margin:auto;} 

.circle{width:200px;height:200px;border-radius:100px; 
font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#fff; 
line-height:150px;text-align:center;background: rgba(0,0,0,0.8); 
margin:auto; display:inline-block; vertical-align:middle; 
}

enter image description here

在此先感謝

來源

2013-05-04 user1944305

追究他們內部3個div元素與每個33%的寬度，和圓形的div使用margin: auto;，這樣，他們將是等於。

Demo

<div class="wrap_me"> 
    <div></div> 
</div> 
<div class="wrap_me"> 
    <div></div> 
</div> 
<div class="wrap_me"> 
    <div></div> 
</div>

CSS

.wrap_me { 
    width: 33%; 
    border: 1px solid #f00; 
    float: left; 
} 

.wrap_me div { 
    width: 150px; 
    height: 150px; 
    border-radius: 100px; 
    border: 1px solid #ddd; 
    margin: auto; 
}

您可以在一個容器內用min-width財產也持這種讓你的元素不換行櫃面寬度不足

來源

2013-05-04 13:06:49

謝謝！我到了那裏，但是這些圈子並沒有集中在包裝盒中。儘管保證金：汽車 – user1944305 2013-05-04 13:15:30

@ user1944305你可以創建一個小提琴嗎？ – 2013-05-04 13:16:19

沒關係，它與顯示有關：inline-block，只是刪除它，似乎工作正常。再次感謝！ – user1944305 2013-05-04 13:20:36

什麼Mr.Alien表示沒有錯，但是

我難以繼續其均勻分散開

如果你想甚至沿着容器的整個寬度分佈 div的，你可以浮在最左邊的DIV向左，最右邊的格到右邊和中間的div會得到float:none和margin: auto，像這樣：

.container { 
    width: 300px; 
    height: 100px; 
} 

.container div { 
    width: 25%; 
    height: 100%; 
    background: blue; 
    border-radius: 100%; 
} 

.inner-left { 
    float: left; 
} 

.inner-middle { 
    float: none; 
    margin: auto; 
} 

.inner-right{ 
    float: right; 
    position: relative; 
    bottom: 100%; 
}

見jsfiddle。

編輯：更新小提琴 - 沒救了......

來源

2013-05-04 13:19:16

在一個容器div內浮動3個div

回答

相關問題