Question

我有三个容器（div），第三个div有一个设定的宽度，但我需要其他两个容器才能响应。当前的HTML设置：

<div id="page-type">
        <div id="type-container">
            <div>
                <p id="type-title">Events</p>
            </div>
        </div>
        <div class="type-options">

        </div>
        <div id="type-back">
            <a href="#" id="back">Back to Explore</a>
        </div>
    </div>

当前的css：

#page-type {
float: left;
width: 100%;
background: #D2D3D5;
height: 60px;
}
#type-container {
float: left;
width: auto;
}
#type-options {
height: 60px;
width: auto;
overflow: hidden;
}
#type-back {
border-left: 1px #BDBEC1 solid;
float: right;
width: 160px;
}

我可以将type-container和type-options放在同一行并做出回应，但我无法将type-back保留在同一行。

视觉示例： enter image description here

-----编辑----- 澄清更多：

type-container调整以适应其内容
type-back是设定宽度
type-option填写type-container和type-back之间的空格，无论内容如何

type-container和type-options填满将type-back推到下一行的整行。我需要type-back保持在线的右侧，而其他两个响应。

Answer 1

在前两列中放置一个包装，然后就可以使用CSS3的calc()。

#wrapper {
    width: calc(100% - 161px); /* extra px for 1px border */
    float: left;
}

Demo here

IE8解决方法 - 使用border-box：

#wrapper {
    margin-right: -161px;
    padding-right: 161px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

IE8 Demo

Answer 2

在CSS3中，您可以使用calc(X% - 160px)将基于百分比的容器的宽度减少多个像素。

一个简单的例子可能是：http://jsfiddle.net/e3vC4/

Answer 3

没有必要为此使用calc，尽管它有一个不错的功能（+1） - 遗憾的是它的支持在某些地方仍然不完整，尽管进行了大量的研究，仍然很难确切地说哪些浏览器版本将按预期工作（如果您假设所有现代浏览器用户都自动升级，则很好）。

根据您的先决条件，您还有两个我知道的选项：

1。绝对位置最后一列

这是一个简单的解决方案，但需要注意的是，某些较旧的移动设备可能会以奇怪的方式处理绝对位置。

为了实现这一点，您需要做的就是在容器上放置position: relative，在第三列放置position: absolute; right: 0; top: 0; ...并保持中心列的居中位置正确，添加margin-right: 161px。

Pos. Abs. example on JSFiddle

CSS 〜标记符合您的示例

#page-type {
  display: block;
  position: relative; /* added */
  width: 100%;
  background: #D2D3D5;
  height: 60px;
  overflow: hidden;
}

#type-container {
  display: block;
  float: left;
  text-align: center;
}

#type-options {
  display: block;
  height: 100%;
  text-align: center;
  overflow: hidden;
  margin-right: 161px; /* added */
}

#type-back {
  display: block;
  position: absolute; /* added */
  right: 0; /* added */
  top: 0; /* added */
  border-left: 1px #BDBEC1 solid;
  width: 160px;
  height: 100%;
}

2。在没有hasLayout / shrinkwrap

的兄弟姐妹之前向右和/或向左漂浮

这是基于浮动元素占用文档中的空间，并且块元素默认情况下会自动扩展以填充剩余区域 - 只要它没有被强制使用用float，overflow或其他 hasLayout 或 shrinkwrap 技巧来定义它的边缘。

如果您可以重新排列DOM排序，即#type-back之前放置#type-options，则此选项仅向您开放。这不会影响视觉顺序，但它会对布局的计算方式产生很大影响，这也是您遇到尝试问题的原因之一。在离开其他元素以计算其尺寸之前，您需要将浮动元素放置到位。

Float example on JSFiddle

注意：更改DOM元素的顺序可能是有益的，但它也可能是一个障碍;这一切都取决于标记是什么，以及谁将查看它。例如，有时在DOM上方具有可操作链接对于标签和屏幕阅读器用户可能是有用的，但根据上下文，相反的情况也可能是正确的。

MARKUP 〜注意重新排列的DOM顺序

<div id="page-type">
  <div id="type-container">
    <p id="type-title">Events</p>
  </div>
  <div id="type-back">
    <p><a href="#" id="back">Back to Explore</a></p>
  </div>
  <div id="type-options">
    <p>Options</p>
  </div>
</div>

<强> CSS

#page-type {
  display: block;
  width: 100%;
  background: #D2D3D5;
  height: 60px;
  overflow: hidden;
}

#type-container {
  display: block;
  float: left;
  text-align: center;
}

#type-options {
  display: block;
  height: 100%;
  text-align: center;
  overflow: hidden;
}

#type-back {
  float: right;
  border-left: 1px #BDBEC1 solid;
  width: 160px;
  height: 100%;
}

注意：应该说明，当“响应”到最小尺寸时，此版本确实会突破到下一行。但是，我倾向于设计在空间紧张时消失的物品，这种方法很适合这种想法。

摘要

这些只是另外两种可能的选择。如果您正在为渐进式客户或自己开发，那么我个人会坚持使用calc方法。更容易弄清楚正在发生的事情，并且更容易让未来的开发人员改变。

然而，有时 ~~经常经常~~ 所有爆破的时间客户想要尽可能支持最广泛的设备（无需投入额外的时间和金钱），在这种情况下，你最好采用另一种方法（一种不会随意破坏经理的当代笔记本电脑），运行IE 7.5？或8.33333 ???甚至Netscape 4.7？）。

除非你当然有任何余地可以争取使用更先进的方法，这似乎最近变得容易。

Answer 4

我与设计师坐下来进行更多澄清并讨论替代解决方案。我让第三个做了响应，允许我使用两个容器：一个容器page-type和type-options设置为x％，另一个容器type-back设置为y％。这样做可以让我保持所有元素的响应。

如何设置中心容器以保持响应？

4 个答案:

1。绝对位置最后一列

2。在没有hasLayout / shrinkwrap

摘要