logo标签列表

固定布局 - 流式布局 - 固定布局问题解决

htmlcsslayoutfixedfluid-layout
3
我想要一个跨浏览器兼容的[固定][流动][固定]布局。
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
这很简单。
这里是代码。
<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，比如页脚。只需给它一个clear:both，它就会自动显示在页面底部。
以下是带有页脚的示例：
<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>

看，你已经拥有了流体布局。

0

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

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

0
这是我想要的：http://siteroller.net/articles/3-caolumn-no-tables-no-floats/prettyboxes-fixed-and-fluid-columns.php 但是链接失效了！ - eozzy
0
至少在你对浮点数感到厌烦之前，祝你好运。 - SamGoody
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接