css - 百分比宽度 div 后跟固定宽度 div

Question

我正在尝试使用 CSS 和 HTML 实现以下布局:

_____________________________________________________________________________
|  div1  33%         |  div2  33%         |  div3  33%         | div4 200px |
—————————————————————————————————————————————————————————————————————————————

明确一点，我希望 div1、div2、div3 在添加 200px div 后占据 剩余 宽度的三分之一。

我尝试过的:

1. 在容器 div 中有 div1、div2、div3

2. 然后将div4向右浮动，宽度为200px。

我试过其他各种方法，但都无济于事。我将不胜感激。

Answer 1

您必须弄乱填充以修复其余部分，但下面是一个可用的 fiddle 和代码。抱歉命名约定不佳，但您应该能够将所有这些更改为您需要的。

http://jsfiddle.net/8HgHt/

.third {
  padding: 0;
  background-color: gray;
  height: 100px;
  float: left;
  display: table-cell;
  width: 33%;
}

.third:hover {
  background-color: red;
}

.third_holder {
  float: left;
  width: 100%;
  display: table-cell;
}

.absolute_div {
  width: 200px;
  display: table-cell;
  background-color: silver;
}

.whole_container {
  width: 100%;
  display: table;
}

<div class="whole_container">

  <div class="third_holder">
    <div class="third">
    </div>
    <div class="third">
    </div>
    <div class="third">
    </div>
  </div>

  <div class="absolute_div">
  </div>
</div>