Fixed - Liquid - Fixed Layout

2019-07-07 04:27发布

站内问答 / HTML/CSS
1402 4 2

I'd like to have a [Fixed][Liquid][Fixed] cross-browser compatible layout.

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

Would this work/better way to do it?

4条回答
相关推荐>>
2楼-- · 2019-07-07 05:16

I like Robert's answer. I would also add a wrapper around the left, right, center and footer. Here, I set the id to "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>

Then, you can also add the style for the "page":

    #page {   
    min-width: 600px;   
    }

This way, if the user shrinks their browser down to a very small size, the content still looks good.

查看更多
0人赞 添加讨论(0) 举报
beautiful°
4楼-- · 2019-07-07 05:22

This is pretty simple.

here is the code

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

I'm using floats instead of position absolute. The advantage of using floats above absolute positioning is that you can put a nother div beneath it, lets say the footer. And just give it a clear: both and it will automatically display at the bottom of the page.

here is an example with a footer

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

Voila! You've got your liquid layout.

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
5楼-- · 2019-07-07 05:27

check this out: http://siteroller.net/articles/3-column-no-tables-no-floats

But no,I don't think that would work. There are plenty of links in said article though to address your issue.

And if there is any interest, I will extend what is written there.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)