3

我想要一个 [Fixed][Liquid][Fixed] 跨浏览器兼容的布局。

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

这会工作/更好的方法吗？

4

4 回答 4

4

这很简单。

这是代码

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

瞧！你有你的液体布局。

于 2009-10-13T10:39:19.390 回答
0

看看这个： http ://siteroller.net/articles/3-column-no-tables-no-floats

但是不，我认为这不会奏效。上述文章中有很多链接可以解决您的问题。

如果有任何兴趣，我会扩展那里写的内容。

于 2009-10-13T07:51:56.790 回答
0

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

于 2009-10-13T07:55:35.893 回答
0

我喜欢罗伯特的回答。我还将在左侧、右侧、中心和页脚周围添加一个包装器。在这里，我将 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;   
    }

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

于 2011-03-06T07:21:59.227 回答