Question

这是HTML代码

<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

中心Div有一个固定的宽度，左边和右边的div应该使用剩余的宽度

CSS：

.left { float: left; }
.center { width: 500px; float: left; }
.right { float: right; }

我能做什么，左右div使用剩余宽度？

Answer 1

3柱流体布局，中心柱为500px

这肯定是一个困难的布局。我找到了这个模拟它的演示页面：

http://www.gunlaug.no/tos/moa_27c.html

并且能够使用相当少量的CSS和HTML进行复制（您必须更改标记）。演示：http://jsfiddle.net/jAsMx/

<div id="side1">
    <div class="col">
        <p>First</p>
    </div>
    <div>
        <p>Second</p>
    </div>
</div>
<div id="side2">
    <div class="col">
        <p>Third</p>
    </div>
</div>

#side1 {
    width: 50%;
    float: left;
    margin: 0 -260px 0 0;
    background: #fff;
    padding: 0 0 10px;
}
#side1 div {
    margin: 0 250px 0 0;
    min-height: 300px;
    background: #dda;
}
#side2 {
    width: 50%;
    float: right;
    margin: 0 0 0 -260px;
    background: #fff;
}
#side2 .col {
    background: #dda;
    margin: 0 0 0 250px;
}
#side1 .col {
    background: #fea;
    width: 500px;
    float: right;
    margin: 0 -250px 0 0 ;
    position: relative;
}
.col {
    /* For backgrounds: This is not an equal height layout yet... */
    min-height: 300px;
}

enter image description here

它使用负边距来补偿中心列的固定宽度，以及2-1-3列排序（这提供了一个小的SEO提升，因为您的主要内容在页面源中更高）。虽然这不是“准备生产”的布局，但它应该让你开始。

Answer 2

A：指定父DIV的宽度
B：为儿童DIV设置合适的宽度
C：保持心态模型概念（http://www.w3schools.com/css/css_boxmodel.asp）

看看这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  /TR/xhtml1    /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrap{
    width:950px;
    margin:0 auto;
    }
.left { float: left; border:1px solid red;height:400px; width:222px; }
.center { width: 500px; float: left; border:1px solid blue;height:400px; }
.right { float: right; border:1px solid green; height:400px; width:222px; }
</style>
</head>
<body>
<div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

::评论的第二个答案::
我通过Javascript编写代码来解决您的问题，测试一下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  
/TR/xhtml1    /DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

#wrap{

    width:100%;

    margin:0 auto;

    border:1px solid #FFFF00;

    }

#left { float: left; border:1px solid red;height:400px; width:222px; }

#center { width: 500px; float: left; border:1px solid blue;height:400px; }

#right { float: right; border:1px solid green; height:400px; width:222px; }

</style>

</head>

<body>

<div id="wrap">

    <div id="left"></div>

    <div id="center"></div>

    <div id="right"></div>

</div>



</body>

</html> 

<script type="text/javascript">

document.getElementById('center').style.width = '500px';

var wrapWidth = (document.getElementById('wrap').style.width = 
window.innerWidth+'px').split('px');

var centerWidth =(document.getElementById('center').style.width).split('px');

var rightLeft =((wrapWidth[0] - centerWidth[0])-6)/2;

document.getElementById('right').style.width 
=document.getElementById('left').style.width = rightLeft+'px' ;



    </script>

中心DIV和外部DIVS

2 个答案:

3柱流体布局，中心柱为500px