Rumah >hujung hadapan web >tutorial css >Lebar lajur kanan tetap, kandungan lajur kiri muncul dahulu dan susun atur lebar penyesuaian (contoh kod)
Lebar lajur kanan tetap, kandungan lajur kiri muncul dahulu dan susun atur lebar penyesuaian (contoh kod)
- WBOYasal
- 2016-05-16 12:09:261586semak imbas
Dalam bab ini, kami akan memperkenalkan lebar lajur kanan tetap, dan kandungan lajur kiri akan muncul terlebih dahulu dan reka letak akan menyesuaikan dengan lebar pada masa yang sama Ia mempunyai nilai rujukan tertentu saya harap ia akan membantu anda.
Cara ia berfungsi
#wrapper mesti mencetuskan hasLayout, jika tidak kadang-kadang kandungan di dalam akan terapung secara pelik saya menggunakan float secara langsung, tetapi kaedah lain boleh digunakan. Malah, jika anda hanya ingin mencapai kesan yang diperlukan oleh contoh ini, anda tidak perlu menggunakan #wrapper.
#left mentakrifkan 100% lebar dan menggunakan margin:0 0 0 -200px untuk meletakkan keseluruhan blok kiri pada offset 200px ke kiri, dan kemudian menggunakan jidar #innerLeft:0 0 0 200px untuk menolak keluar kandungan ,
#right hanyalah apungan mudah, #innerRight mempunyai banyak kesan dan hanya dikekalkan secara lazimnya Selain menjadikan kawalan kami lebih mudah, ia juga boleh mengekalkan struktur tidak berubah untuk perubahan seterusnya susun atur.
Selain membetulkan bahagian kanan dan kiri, rakan-rakan yang mempunyai masa boleh mencubanya
Ada masalah
IE versi pelayar di bawah IE7 tidak tersedia lebar min, jika terlalu kecil, ia akan kelihatan hodoh. Kami akan menyelesaikan masalah dalam artikel seterusnya
Fungsi lanjutan
Jika anda mahu lajur kiri dan kanan mempunyai ketinggian yang sama, anda boleh rujuk ini: Selesaikan penyesuaian ketinggian lajur (tinggi lajur Sama) lima kaedah
juga boleh dimainkan: lebar lajur tengah tetap, lebar sama lajur kiri dan kanan dan penyesuaian
juga boleh dikembangkan Fungsi sedemikian: kaedah susun atur dengan ketinggian minimum 100% dan pengaki disimpan di bahagian bawah
Contoh kod:
<!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>