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

Posted 2023-03-06

【中文标题】百分比宽度 div 后跟固定宽度 div

【英文标题】：Percentage-width divs followed by fixed width div

【发布时间】：2014-08-28 09:26:12

【问题描述】：

我正在尝试使用 CSS 和 html 实现以下布局：

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

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

我尝试过的：

在容器 div 中包含 div1、div2、div3

然后将 div4 浮动到右侧并赋予其 200px 的宽度。

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

【问题讨论】：

请展示您已经完成的工作（代码）并使用jsfiddle发布一个示例

calc 可以在这里工作。

【参考方案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>

【参考方案2】：

你可以使用calc

Jsfiddle Demo

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

【参考方案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>