Home >Web Front-end >CSS Tutorial >Fixed right column width, left column content appears first and adaptive width layout (code example)
Fixed right column width, left column content appears first and adaptive width layout (code example)
- WBOYOriginal
- 2016-05-16 12:09:261586browse
In this chapter, we will introduce a fixed right column width, and the content of the left column will appear first and the layout will adapt to the width at the same time. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
How it works
#wrapper must trigger hasLayout, otherwise sometimes the content inside will float strangely. I use float directly, but other methods can be used. In fact, if you just want to achieve the effect required by this example, you don’t even need to use #wrapper.
#left defines 100% width and uses margin:0 0 0 -200px to place the entire left block at an offset of 200px to the left, and then uses #innerLeft's margin:0 0 0 200px to push out the content ,
#right is just a simple float, #innerRight has a lot of effect and is just retained habitually. In addition to making our control simpler, it can also keep the structure unchanged for the next change of layout.
In addition to fixing the right side and the left side, friends who have time can try it out
There are problems
IE browser versions below IE7 are not available min-width, if it is too small, it will look ugly. We will solve the problem in the next article
Extended functions
If you want the left and right columns to be of equal height, you can refer to this: Solve the column height adaptation (column height The same) five methods
can also be played: fixed middle column width, equal width of left and right columns and adaptive
can also be expanded Such a function: layout method with minimum height 100% and footer kept at the bottom
Code example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>固定右栏宽度, 左栏内容先出现同时自适应宽度的布局 - Beautiful Style « 样式之美 » loaoao.com </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="KEYWords" content="fixed,css,xhtml,effect" />
<meta name="DEscription" content="固定右栏宽度, 左栏内容先出现同时自适应宽度 " />
<meta name="author" content="aoao" />
<meta content="all" name="robots" />
<link rel="start" href="http://www.loaoao.com" title="Home" />
<style type="text/css">
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
min-width:620px;
margin:0;
padding:0;
}
#wrapper{
float:left;
display:inline;
margin:0 30px;
background-color:#ccc;
}
#header,#footer{
clear:both;
padding:10px;
text-align:center;
}
#left{
float:left;
width:100%;
margin:0 0 0 -200px;
}
#innerLeft{
margin:0 0 0 200px;
background-color:#efefef;
}
#right{
float:left;
width:200px;
background-color:#ddd;
}
.inner {
padding:2px 12px;
}
p{ line-height:1.6em}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>固定右栏宽度, 左栏内容先出现同时自适应宽度的布局</h1>
</div>
<div id="left">
<div id="innerLeft" class="inner">
<h2>工作原理</h2>
<p>#wrapper必须触发hasLayout,不然有时里面的内容会浮得怪怪的，我直接用float的，可以用其他方式。其实如果只是要做到这个例子要的效果连#wrapper都可以不要。
#left定义100%宽度并利用margin:0 0 0 -200px把左边整块放在偏移入左边200px处，再利用#innerLeft的margin:0 0 0 200px再把内容撑出来，
#right只是简单的浮动，#innerRight米多大作用，只是习惯性保留着，除了可以让我们的控制更简单点，还可以为下次改变布局可保持结构不变。</p>
<p>除了可以固定右边也可以固定左边，有空的朋友可以尝试一下</p>
<h2>存在问题</h2>
<ul>
<li>IE7以下版本的IE浏览器无min-width，拉太小会很难看。下篇文章再解决</li>
</ul>
<h2>扩展功能</h2>
<ul>
<li>如果想左右两列等高可以参考这个：<a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=45">解决列高度自适应(列高度相同)的五种方法</a>
</li>
<li>
也可以玩：<a href="http://lab.loaoao.com/demo/layout/fixedmiddle/">固定中栏宽度, 左右两栏宽度相等和自适应</a>
</li>
<li>还可以扩展这样的功能：<a href="http://my.opera.com/tifa/blog/show.dml/251210">最小高度100%，页脚保持在底部的布局方法</a></li>
</ul>
</div>
</div>
<div id="right">
<div id="innerRight" class="inner">
<p>这只是个简单的例子，希望对初学CSS布局的朋友有帮助。</p>
<p>基本还有很多功能可以写进来，怕写得太乱了，还是等下一篇，好骗点流量。</p>
</div>
</div>
</div>
</body>
</html>