一个 div：将某些东西向左对齐，一些在右边，一些在中间答案

【问题标题】：One div: Justify somethings to the left, some right and some middle一个 div：将某些东西向左对齐，一些在右边，一些在中间
【发布时间】：2014-09-30 23:09:40
【问题描述】：

我有以下 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 |
|----------------------------------------------------------------------------------|

当 div 太窄而无法容纳所有内容时，应该发生一些合理的事情。

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

需求总结：

3 个按钮向左对齐
标题居中
状态左对齐
当 div 太窄而无法容纳所有三个内容时，标题应该出现在其他内容之前的单独一行（其他合理的行为也可以）。

实现这种布局的最佳方式是什么？

【问题讨论】：

你试过什么失败了？
What is the best way to implement this kind of layout? 使用 CSS 的那种，很可能是媒体查询。长话短说：除非您先尝试自己做，否则我们不会帮助您。
你应该花时间让你漂亮的小盒子布局实际尝试一些 CSS
“奖金部分”？这不是代码高尔夫，当然也不是免费的“请为我编写代码”服务。提出实际问题 - 不要提出代码请求。
您是否只是在下面的部分答案中进行了编辑，以使其看起来像是您试图自己解决问题？

标签： html css

【解决方案1】：

我不确定这是否是您想要的，但我做了一个 jsfiddle，对 html http://jsfiddle.net/dj0p1tqx/ 进行了几处更改

我所要做的就是将它们放入容器中，等于 width:33.333%

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：