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 |
|----------------------------------------------------------------------------------|

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

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

要求摘要：

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

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

Answer 1

我不确定这是不是你想要的，但是我对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>

一个div：左边的一些东西，一些右边和一些中间的东西

3 个答案: