いくつかの一般的なレイアウトの概要_html/css_WEB-ITnose

ディレクトリ

1. 1. 1 つの列は固定幅で、1 つの列は画面の幅に適応します
      1. 方法 2: 位置+ margin
      2. 方法 3: float+negative margin
2. 1. 左右の列の幅は固定されており、中央の幅は適応型です
   2. 左右の列 列幅は適応型で、中央の幅は固定です
      1. 方法 1: 負のマージン値を使用して、中央の幅を固定します

この記事の主な内容 Webページでよく使われる3カラムレイアウトの実装方法を紹介します。

この記事は主に次の記事を参照しています:

私がよく知っている 3 つの 3 列 Web ページの幅適応型レイアウト方法 - Zhang Xinxu

2 つ列レイアウト、3 列レイアウト レイアウト、均等高さレイアウト、フロー レイアウト - Xiaoqi

CSS レイアウト - 左固定幅、右適応幅、均等高さレイアウト - w3cplus

均等高さの列レイアウトを作成する 8 つの方法

2 列レイアウト

1 つの列は固定幅で、もう 1 つの列は画面の幅に適応します

達成すべき目標は次のとおりです。左が適応型画面幅、右が適応型画面幅です。

方法 1: float+margin

アイデア: 左側にフロートを設定し、右側にマージン左の値を追加して、左側の固定レイアウトと右側のアダプティブ レイアウトを実現します。

HTMLとCSSは以下の通りです。

2カラムレイアウト方法1

• html
• css

<div id="left"></div><div id="content"></div>

ここをクリックしてデモを表示

方法 2: ポジション + マージン

アイデア: 左側に絶対配置。右側の列は margin-left を使用して実装されます。

HTMLとCSSは以下の通りです。

2カラムレイアウト方法2

• html
• css

<div id="left">左边内容</div><div id="content">主要内容</div>

ここをクリックしてデモを表示

方法 3: float+negative margin

アイデア: フローティングと負のマージンを実装して使用します。

HTMLとCSSは以下の通りです。

2カラムレイアウト方法3

• html
• css

<div id="left">左边内容</div><div id="content">  <div id="contentInner">主要内容</div></div>

デモを表示するにはここをクリックしてください

固定幅の 2 つの列

左側にサイドバー、右側にメインコンテンツ

HTML と CSS は次のとおりです。

左右 2 列幅の固定レイアウト

• html
• css

<div class="wraper">  <div class="header">     <h1 id="这是头部文字">这是头部文字</h1>  </div>  <div class="aside sidebar">     <h2 id="这是侧边栏">这是侧边栏</h2>  </div>  <div class="main-content">     <h2 id="主要内容">主要内容</h2>  </div>  <div class="footer">     <h2 id="这是底部内容">这是底部内容</h2>  </div></div>

デモを表示するにはここをクリックしてください

サイドバーは右側にあり、メインコンテンツは左側にあります

上記のコードの HTML 構造を変更せずに、CSS でサイドバーをフローティングするだけです:

左右2列の固定幅レイアウト 2

• html
• css

<div class="wraper">  <div class="header">     <h1 id="这是头部文字">这是头部文字</h1>  </div>  <div class="aside sidebar">     <h2 id="这是侧边栏">这是侧边栏</h2>  </div>  <div class="main-content">     <h2 id="主要内容">主要内容</h2>  </div>  <div class="footer">     <h2 id="这是底部内容">这是底部内容</h2>  </div></div>

ここをクリックしてデモを表示します

2 列固定幅レイアウトを実装するその他の方法:

http://www.w3cplus.com/ css/layout/fixed-layout/two-columns-2.html

http://www.w3cplus.com/css/layout/fixed-layout/two-columns-3.html

3 -列レイアウト

達成すべき目標は、左、中央、右の 3 列レイアウト、左と右の列の幅は固定 (200px に設定)、中央の幅は適応型です。

左右の列の幅は固定され、中央の幅は適応的です

方法 1: 絶対配置方法

アイデア: 左右の列は絶対位置を使用しますと は、ページの左側と右側にそれぞれ固定されます。側面では、中​​央の本文の列がマージン値を持って配置されます。 HTML と CSS は次のとおりです。

3 列レイアウトの絶対配置

• html
• css

<div id="left"></div><div id="main">    <div class="box">中间内容</div></div><div id="right"></div>

デモを表示するにはここをクリックしてください

この方法の欠点は次のとおりです。中央の列に幅のある内部要素 (ボックス) が含まれている場合、ブラウザの幅が一定以下であると同時に、左右の固定バーと中央のボックスが重なり合います。

方法 2: ネガティブマージン法

アイデア: まず、中央のボディは 2 層ラベルを使用し、外側の div 幅は 100% で表示され、フロート表示されます。内側の div は実際のメインコンテンツで、左右に 200px のマージン値が含まれます。左の列と右の列の両方でマージンの負の値の方法が使用され、左の列は左にフロートされ、margin-left は -100% であるため、左の列の div はページの左側に配置されます。 ; 右の列も左に移動し、その margin-left 値は負の値になり、そのサイズはそれ自体の幅の 200 ピクセルになります。

HTMLとCSSは以下のとおりです。

3カラムレイアウトのマイナスマージン方式

• html
• css

<div id="main">    <div id="content">中间内容</div></div><div id="right"></div><div id="left"></div>

ここをクリックしてデモを表示

这种方法需要注意的是几个div的顺序， 先是主体部分div，然后再是左右两栏的div。同样存在方法一的不足，当中间栏含有一定宽度的内部块元素时，缩小浏览器窗口左右栏内容和中间块元素重叠。

方法三：自身浮动法

应用了标签浮动跟随特性，左栏左浮动，右栏右浮动，主体放在后面，可以实现自适应。

这里几个div的顺序关键是主体的div放在后面，左右两栏顺序任意。

HTML和CSS如下：

三栏布局之自身浮动法

• html
• css

<div id="right"></div><div id="left"></div><div id="main"></div>

点击这里查看Demo

这个方法的优点是简洁高效，缺点也很明显，中间栏要避免 clear: both

双飞翼布局

使用浮动，负边距，和相对定位来实现。优点：

• 实现内容和布局的分离
• mian部分是自适应宽度的，任何一栏都可以是最高一栏
• 需要的hack少，在浏览器中兼容性好

缺点：main需要额外的包装层

HTML和CSS如下：

双飞翼布局

• html
• css

<div id="page">  <div id="head">head</div>  <div id="body">    <div class="main">      <div class="main-content">Main-content</div>    </div>    <div class="Sub">sub</div>    <div class="Extra">Extra</div>  </div>  <div id="foot">Foot</div></div>

先把最重要的main放到前面，并将main占满100%，然后是sub, extra。将三者都采用浮动布局： float:left，利用margin-left: -100%，把sub拉倒最左边，同理用margin-left: -180px将extra放到右侧。这样将sub 和extra定位到正确的位置。然后定位main:给main增加一层包裹，里层的main-content的作用目标是定位main到合适的位置，为此，引入margin。

点击这里查看Demo

圣杯布局

圣杯布局和双飞翼布局都是实现两边顶宽，中间自适应的三栏布局，中间栏放在文档流前面优先渲染。两者不同之处在于”中间栏div的内容不被遮挡的实现思路”：

• 双飞翼布局如上介绍，是在main的内部又创建div来放置内容，在该div里设置margin-left和margin-right为左右两栏div留出位置。
• 圣杯布局的实现思路是将div设置padding-left和padding-right后，将左右两个div用相对布局position:relative并配合right和left属性，以便左右两栏div移动后不被遮挡。

HTML和CSS如下：

圣杯布局

• html
• css

<div id="page">  <div id="header"> This is the Header</div>  <div id="container">    <div id="center" class="column" >Main content</div>    <div id="left" class="column" >left sidebar </div>    <div id="right" class="column" > right sidebar </div>  </div>  <div id="footer-wrapper">    <div id="footer">This is the footer </div>  </div></div>

点击这里查看Demo

左右两栏宽度自适应,中间宽度固定

方法一 中间定宽，借助负margin值

HTML和CSS如下：

三栏布局之中间固定

• html
• css

<div id="left">    <div class="inner"></div></div><div id="main">  <div class="inner"></div></div><div id="right">  <div class="inner"></div></div>

点击这里查看Demo

使用这种方法实现的效果不太理想，当浏览器窗口缩小的时候，左右两侧的内容就会被”挤掉”

方法二 使用flex

HTML和CSS如下：

三栏布局之中间固定

• html
• css

<div class="grid">  <div class="col fluid">左侧内容</div>  <div class="col fixed">中间</div>  <div class="col fluid">右侧内容</div></div>

点击这里查看Demo

清除浮动

用来解决父元素高度自适应高度最大的子元素。只需在浮动元素父元素添加伪类:

.container:after { content: ""; display: block; clear: both;}

未完待续。。。