中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

作者: Alan Pearce
原文: Multi-Column Layouts Climb Out of the Box
地址: http://alistapart.com/articles/multicolumnlayouts

我們都了解擁有相同高度的布局是很麻煩的事，有很多相關(guān)資料提到過(guò)相關(guān)設(shè)計(jì)方法，所以在這我就不多做解釋了。

最近在研究一個(gè)兩個(gè)欄目的動(dòng)態(tài)布局，每個(gè)欄目背景不同。我立刻想起了Dan Cederholm的Faux Columns，但我仍然需要一個(gè)動(dòng)態(tài)布局的方法。我又看了完美布局的文章One True Layout，但是有很多bug，需要許多注釋和程序。甚至考慮用JavaScrip來(lái)實(shí)現(xiàn)欄目始終保持同一高度，但是不行。絕望之余，幾乎要用table布局，不，一定還有更好的方法。我想著一個(gè)問(wèn)題“盒子外面是什么”，border！如果我可以使“sidebar”（或"rail"）的div相對(duì)與“content”的div浮動(dòng)，就可以實(shí)現(xiàn)多欄目相同高度。這個(gè)方法在很多地方介紹過(guò)：Douglas Livingstone的introduced ，Holly的extended John Bergevin的Position Is Everything。由one true layout的方法發(fā)展而來(lái)，用更簡(jiǎn)潔清楚的代碼 實(shí)現(xiàn)了兩個(gè)欄目的動(dòng)態(tài)變化。下面是代碼：

HTML:

<div id="container">
  <div id="content">This is<br />some content</div>
  <div id="rail">This is the rail</div>
</div>

CSS:
#container{
  background-color:#0ff;
  overflow:hidden;
  width:750px;
}
#content{
  background-color:#0ff;
  width:600px;
  border-right:150px solid #f00; &raquo;
  /* The width and color of the rail */
  margin-right:-150px; /* Hat tip to Ryan Brill */
  float:left;
}
#rail{
  background-color:#f00;
  width:150px;
  float:left;
}

給content div右加border，顏色寬度和rail一樣，并相對(duì)與rail浮動(dòng)。Margin:-150px;使rail div移到margin騰出的空間。如果content div變的比rail div 高，border隨content div變高。視覺(jué)效果就是好像rail div也在變高。container的顏色設(shè)定和content div一樣，如果rail div達(dá)到最高，container隨之變高，這樣就給我們content變高的效果。
看看效果。See it in action 。試改變字體大小，布局隨之變化。

3個(gè)欄目：3個(gè)顏色
3個(gè)欄目的布局有點(diǎn)不同:直接給container div加border.

HTML:

<div id="container">
  <div id="center">CENTER<br />COLUMN CENTER</div>
  <div id="leftRail">LEFT RAIL</div>
  <div id="rightRail">RIGHT RAIL</div>
</div>

CSS:
#container{
  background-color:#0ff;
  float:left;
  width:500px;
  border-left:150px solid #0f0; &raquo;
  /* The width and color of the left rail */
  border-right:200px solid #f00; &raquo;
  /* The width and color of the right rail */
}
#leftRail{
  float:left;
  width:150px;
  margin-left:-150px;
  position:relative;
}
#center{
  float:left;
  width:500px;
  margin-right:-500px;
}
#rightRail{
  float:right;
  width:200px;
  margin-right:-200px;
  position:relative;
}

中間的欄目margin-right:-150px 使左邊的rail div始終沿中間欄目的左沿浮動(dòng)，使旁邊欄目在真確的位置顯示。還有一些方法可以實(shí)現(xiàn)，但這個(gè)方法最好，更易實(shí)現(xiàn)流動(dòng)布局（動(dòng)態(tài)布局）。

因?yàn)檫厵谠赾ontainer div外，浮動(dòng)在border上。使用overflow: hidden使之隱藏：IE不支持，F(xiàn)irefox可以實(shí)現(xiàn)。邊欄不需要設(shè)置顏色，它會(huì)于container div的顏色保持一致。

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁(yè) 下一頁(yè) 垂直三欄布局擁有相同高度的方法 [2]

◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論