Question

我有三个div，我希望两个div divs只占用内容所需的空间，而中间div尽可能宽。这是cource的一行和CSS。

代码如下：

<div class='wrapper'>
  <div class='small'>Left/div>
  <div class='big'>Big</div>
  <div class='small'>Right</div>
</div>

任何线索？

Answer 1

查看The Perfect 3 Column Liquid Layout。

And here's one on Dynamic Drive

最后，由于历史原因，here's the A List Apart Holy Grail article。

Answer 2

Perfect 3 Column Liquid Layout是一个很好的起点。你也可以尝试这样的东西，这与它非常相似。

<html>
<head>
    <title></title>
<style type="text/css">
    .small1 {
    float: left;
    width: 20%;
    height:100%;
    }

    .small2 {
    float: right;
    width: 20%;
    height: 100%;
    }

    .big {
        width: 60%;
        height: 100%;
        margin-left: 20%;}
    </style>
</head>
 <body>



  <div class='small1'>Small1</div>
    <div class='small2'>Small2</div>
  <div class='big'>Large</div>

</body>
</html>

由于轻微的标记错误而编辑。

Answer 3

你也可以使用多个包装器（这样设置背景会更容易）

<head>
<style>
    .wrapper{background-color:black;}
    .wrapperLeft{float:left;background-color:blue;width:70%}
    .small{float:left;width:20%;background-color:red;}
</style>
</head>
<body>
    <div class='wrapper'>
      <div class='wrapperLeft'>
         <div class='small'>Left</div>
         <div class='big'>Big</div>
      </div>
      <div class='small'>Right</div>
    </div>

</body>

Answer 4

看一下这篇文章::: http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

CSS问题：中间块填充所有空白区域

4 个答案: