百分比宽度的div后跟固定宽度的div

Question

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

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

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

我尝试过：

1. 将div1、div2、div3放在一个容器div中

2. 然后将div4向右浮动，并给它一个200像素的宽度。

我尝试了其他各种方法，但都没有成功。感谢任何帮助。

- Davido Widre

---

请展示您已经完成的内容（代码），并使用jsfiddle发布一个示例。 - feitla

这里可以使用 calc。 - Paulie_D

Answer 1

您需要调整填充来修复其余部分，但下面是一个工作示例和代码。很抱歉命名规范不佳，但您应该能够将其全部更改为所需内容。

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>

- abalos

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

- Paulie_D

Answer 3

这可以帮助：http://jsfiddle.net/GUcCa/1/

var fxdWidth = parseInt($('#fixd').css("width").replace("px", ''));
var totalWidth = parseInt($('#fixd').parent().css("width").replace("px", ''));
$('#floating').css("width", totalWidth - fxdWidth + "px");

.border {
  border-style: dotted;
  border-width: 1px;
}

.border2 {
  border-style: solid;
  border-width: 1px;
}

.block {
  display: inline-block;
  width: 33%;
}

#fixd {
  width: 200px;
  float: right;
}

#floating {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="border block" id="fixd">
  div4
</div>
<div class="border2 block" id="floating">
  <div class="border block">
    div1
  </div>
  <div class="border block">
    div2
  </div>
  <div class="border block">
    div3
  </div>
</div>

- Himanshu Tyagi