浮動div之間的均勻間距

我想要均勻浮動3個div（或更一般地說）。林建立一個響應主題（有點），我希望具體項目根據可用的寬度相應調整。浮動div之間的均勻間距

現在是的我可以開始採取隨機屏幕測量和計算「突破點」（我通常做的），但有這麼多的設備，即時試圖看看我是否可以做出真正靈活的東西，對我而言，會是更自動的事情。就像當一個人甚至比如說說margin 0px auto;等...

例如。如果我有1000px寬的父母div，並且div1,div2,div3,, div4，我想浮動說，240px寬，「偶」間距，ID也許這樣做。

div1{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; } 
div2{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; } 
div3{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; } 
div4{ float:right; max-width:XXX; min-width:XXX; }

這會給我更多或更少的間距。如果我想調整到不同的屏幕，身份證也許做一個媒體查詢和等等等等等等

然後ID必須從數學開始，使良好的突破點，看起來甚至。

有沒有辦法使得divs之間的間距保持均勻，甚至不受屏幕寬度的限制而不必進入特定的數字？再舉一個例子，比如當一個人做margin 0px auto;例如???

它可能之前已經問過，我很抱歉，如果有。

謝謝先進。

來源

2013-02-23 somdow

display：table or display：table-block should be help if if right to right – 2013-02-23 10:53:12

試試這個，它會動態寬度工作，

#parent 
{ 
    width:99%; 
    text-align:center; 
    border-style:solid; 
} 
.kids 
{ 
    width:23%; 
    border-style:solid; 
    height:100px; 
    display:inline-block; 
}

來源

2013-02-23 11:50:30

如果您的標記類似於這樣......

<div class="parent"> 
    <div>a</div> 
    <div>b</div> 
    <div>c</div> 
    <div>c</div> 
</div>

Flexbox，就可以做到這一點很容易，你不會需要使用較窄設備的媒體查詢。它只是爲你重新分配可用空間。

http://jsfiddle.net/END8C/（包括所有前綴）

.parent { 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    -ms-flex-flow: row wrap; 
    flex-flow: row wrap; 
    -webkit-flex-pack: justify; 
    -ms-flex-pack: justify; 
    -webkit-justify-content: space-between; 
    justify-content: space-between; 
    margin: -5px; /* optional */ 
    overflow: hidden; /* optional */ 
} 

.parent div { 
    -webkit-flex: 0 0 240px; 
    -ms-flex: 0 0 240px; 
    flex: 0 0 240px; 
    margin: 5px; 
}

你仍然可以自由地在子元素中的回落對於不支持Flexbox的瀏覽器使用花車（參見：http://caniuse.com/#search=flexbox）。唯一需要注意的是，Firefox不支持打包，因此您必須爲前綴版本使用@supports塊（請參閱：http://www.sitepoint.com/supports-native-css-feature-detection/）。

您可以通過使用理由得到類似的效果：

http://jsfiddle.net/END8C/1/

.parent { 
    text-align: justify; 
    margin: -5px; /* optional */ 
} 

.parent:after { 
    content: " "; 
    display: inline-block; 
    width: 100%; 
} 

.parent div { 
    display: inline-block; 
    margin: 5px; 
    width: 240px; 
}

你需要註釋掉或最後一個子元素後去掉任何空格，否則將不排隊正確當孩子們包裹。

來源

2013-02-23 14:08:48 cimmanon

浮動div之間的均勻間距

回答

相關問題