Maison >interface Web >tutoriel CSS >Largeur de colonne de droite fixe, le contenu de la colonne de gauche apparaît en premier et disposition en largeur adaptative (exemple de code)
Largeur de colonne de droite fixe, le contenu de la colonne de gauche apparaît en premier et disposition en largeur adaptative (exemple de code)
- WBOYoriginal
- 2016-05-16 12:09:261586parcourir
Dans ce chapitre, nous introduirons une largeur de colonne de droite fixe, et le contenu de la colonne de gauche apparaîtra en premier et la mise en page s'adaptera à la largeur en même temps. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. à cela. J'espère que cela vous sera utile.
Comment ça marche
#wrapper doit déclencher hasLayout, sinon parfois le contenu à l'intérieur flottera étrangement. J'utilise float directement, mais d'autres méthodes peuvent être utilisées. En fait, si vous souhaitez simplement obtenir l’effet requis par cet exemple, vous n’avez même pas besoin d’utiliser #wrapper.
#left définit 100 % de largeur et utilise margin:0 0 0 -200px pour placer tout le bloc de gauche à un décalage de 200px vers la gauche, puis utilise la marge de #innerLeft :0 0 0 200px pour le pousser. le contenu,
#right n'est qu'un simple flottant, #innerRight a beaucoup d'effet et est simplement conservé habituellement. En plus de simplifier notre contrôle, il peut également garder la structure inchangée pour le prochain changement de. mise en page.
En plus de réparer le côté droit et le côté gauche, les amis qui ont le temps peuvent l'essayer
Il y a des problèmes
Versions du navigateur IE en dessous d'IE7, la largeur minimale n'est pas disponible, si elle est trop petite, elle aura l'air moche. Nous résoudrons le problème dans le prochain article
Fonctions étendues
Si vous souhaitez que les colonnes gauche et droite soient de même hauteur, vous peut se référer à ceci : Résoudre l'adaptation de la hauteur de colonne (hauteur de colonne la même) cinq méthodes
peuvent également être jouées : largeur de colonne centrale fixe, largeur égale des colonnes gauche et droite et adaptative
peut également être étendu Une telle fonction : méthode de mise en page avec une hauteur minimale de 100 % et un pied de page conservé en bas
Exemple de code :
<!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>