一個DIV：對齊出頭向左，有的向右和一些中等

Question

我有以下HTML：

<div> 
    <button>b1</button> 
    <button>b1</button> 
    <button>b1</button> 
    <span>Heading</span> 
    <span>Status</span> 
</div> 

當DIV是廣本，我想這要顯示這樣的：

|-------------------------------------------| 
| b1 b2 b3   Heading   Status | 
|-------------------------------------------| 

當DIV是廣本，我想的東西要顯示這樣的：

|----------------------------------------------------------------------------------| 
| b1 b2 b3      Heading         Status | 
|----------------------------------------------------------------------------------| 

當格太窄，無法交流將所有東西都商品化，應該有合理的事情發生

|--------------------------| 
|   Heading   | 
| b1 b2 b3   Status | 
|--------------------------| 

的要求如下：

• 3個按鈕被對準到左側
• 標題居中
• 狀態對準於左
• 當在div太窄，以適應所有三件事情，標題應該在其他事情之前出現在一個單獨的行上（其他合理的行爲也可以）。

實現這種佈局的最好方法是什麼？

Answer 1

林不知道這是否是你想要的，但我做了一個的jsfiddle幾個更改HTML http://jsfiddle.net/dj0p1tqx/

所有我必須做的就是把他們內部的容器，具有同等width:33.333%

Answer 2

的CSS代碼

<style type="text/css"> 
div { 
    margin: 0 auto; 
    position: relative; 
    display: block; 
    width: 100%; 
    text-align: center; 
} 

button { 
    float: left; 
} 

.position-right { 
    float: right; 
} 
</style> 

和HTML：

<div> 
    <button class="position-left">b1</button> 
    <button class="position-left">b1</button> 
    <button class="position-left">b1</button> 
    <span class="position-left">Heading</span> 
    <span class="position-right">Status</span> 
</div> 

Answer 3

你可以這樣做：http://jsfiddle.net/csdtesting/74ShU/40/

.mainDIV { 
 
    position: relative; 
 
    width: 100%; 
 
    min-width: 315px; 
 
} 
 
.leftDIV { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 50px; 
 
    width: 130px; 
 
} 
 
.middleDIV { 
 
    height: 50px; 
 
    width: 100px; 
 
    margin: 0px auto; 
 
} 
 
.rightDIV { 
 
    position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    height: 50px; 
 
    width: 100px; 
 
}

<div class="mainDIV"> 
 
    <div class="leftDIV"> 
 
    <button>b1</button> 
 
    <button>b1</button> 
 
    <button>b1</button> 
 
    </div> 
 
    <div class="middleDIV"> <span>Heading</span> 
 
    </div> 
 
    <div class="rightDIV"> <span>Status</span> 
 
    </div> 
 
</div>