百分比宽度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

你将不得不乱用填充来修复其余部分,但下面是一个工作小提琴和代码.对于糟糕的命名约定感到抱歉,但您应该能够将所有内容更改为您需要的内容.干杯!

http://jsfiddle.net/8HgHt/

HTML:

.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;
}

CSS:

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

Answer 2

你可以使用calc

Jsfiddle演示

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; /* accounting for borders */
}

.wrapper {
    width:80%; /* or any width */
    margin:10px auto; /* for visualisation purposes only */
    overflow:hidden; /* float containment */
}

.wrapper div {
    float:left;
    height:100px;
}

.fixed {
    width:200px;
    background: lightblue;
}

.percent {
    width:calc((100% - 200px)/3); /* the magic bit */
    background: lightgreen;
    border:1px solid grey;
}

支持 IE9 及以上 - http://caniuse.com/calc