Question

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

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

要清楚，我希望在添加200px div后，div1，div2，div3占据剩余宽度的三分之一。

我尝试过：

在容器div中有div1，div2，div3
然后将div4向右浮动并给它宽度为200px。

我尝试了其他各种各样的事情，但无济于事。我很感激任何帮助。我不经常发帖;如果我违反任何礼节规则，请原谅我。

Answer 1

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

http://jsfiddle.net/8HgHt/

<强> HTML：

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

<强> CSS：

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

Answer 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＆amp; up - http://caniuse.com/calc

Answer 3

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

HTML

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

CSS

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

的jQuery

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

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

3 个答案: