Question

我想要[固定] [液体] [固定]跨浏览器兼容布局。

HTML：

body
  div#col-1
  div#col-2
  div#col-3

CSS：

    #col-1 {
    width:150px;
    float:left;
    }
    #col-2 {
    width:100%;
    padding:0 150x;
    }
    #col-3 {
    positon:absolute:
    right:0;
    width:150px;
    }

这样做/更好的方法吗？

Answer 1

这很简单。

这是代码

<html>
<head>
<style type="text/css">
#left {
  float: left;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#right {
  float: right;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#center {
  /* margin with 10px margin between the blocks*/
  margin: 0 160px;
  border: 1px solid black;
  height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>

我使用浮动而不是绝对位置。使用漂浮在绝对定位之上的优点是你可以在它下面放一个另外的div，让我们说这个页脚。并且只需明确说明：两者都将自动显示在页面底部。

这是一个带页脚的示例

<html>
<head>
<style type="text/css">
#left {
  float: left;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#right {
  float: right;
  width: 150px;
  border: 1px solid black;
  background-color: #999;
  height: 50px;
}
#center {
  /* margin with 10px margin between the blocks*/
  margin: 0 160px;
  border: 1px solid black;
  height: 50px;
}
#footer {
  clear: both;
  margin-top: 10px;
  border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>

瞧！你有液体布局。

Answer 2

检查一下： http://siteroller.net/articles/3-column-no-tables-no-floats

但不，我认为这不会起作用。虽然这篇文章中有很多链接可以解决你的问题。

如果有任何兴趣，我会延伸写在那里的内容。

Answer 3

好的，明白了：http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/

Answer 4

我喜欢罗伯特的回答。我还会在左，右，中间和页脚周围添加一个包装器。在这里，我将id设置为“page”：

<body> 
    <div id="page"> 
        <div id="left">Text</div> 
        <div id="right">Text</div> 
        <div id="center">Text</div> 
        <div id="footer">footer</div> 
    </div>
</body>

然后，您还可以添加“页面”的样式：

    #page {   
    min-width: 600px;   
    }

这样，如果用户将浏览器缩小到非常小的尺寸，内容看起来仍然很好。

固定 - 液体 - 固定布局

4 个答案: