DIV+CSS アダプティブレイアウト_html/css_WEB-ITnose-htmlチュートリアル-php.cn

DIV+CSS アダプティブレイアウト_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:21:34

オリジナル

1388 人が閲覧しました

アダプティブレイアウトは高さと幅の 2 つのカテゴリに分けられます。ここでは 3 列レイアウトを例として挙げます。 2カラムの原理は同じです、ははは。以下のようなレンダリングは次のとおりです: 高さ適応型 - 幅適応型

1、高度に適応性のあるレイアウト

原則は各モジュールを絶対位置に設定することです属性の値はそれぞれ先頭モジュールと下部モジュールの高さです、その後、中央のモジュールの高さが適応されます。コードは次のとおりです。htmlコード：

rreee

2、幅adaptive、マージンを使用して3つの方法がありますが最初にレンダリングされ、それ自体が浮動します。

a、絶対配置を使用して幅適応型レイアウトを設定します。原則: 左右の列の幅を左右に設定します。実際、原理は高さ適応型と同じです。他の左列と右列はそれぞれ左と右のフローティングです。

html コード:

<body>        <div class="top">            120px        </div>        <div class="main">            自适应        </div>        <div class="bottom">            120px        </div></body>

ログイン後にコピー

css コード:

.top{    width: 100%;    height: 120px;    position: absolute;    background-color: greenyellow;    }.main{    position: absolute;    width: 100%;    top: 120px;    bottom: 120px;    background-color: azure;    height: auto;}.bottom{    position: absolute;    bottom: 0;//别漏了    width: 100%;    height: 120px;    background-color:greenyellow ;}

ログイン後にコピー

b、中央の列が最初にレンダリングされるアダプティブ 3 列レイアウト、優先レンダリング (読み込み) の鍵: コンテンツは HTML の最初に配置する必要があります。アダプティブ div は左右の前に配置し、親 div に含める必要があります。親 div、left および right モジュールはすべて左にフローティングし、アダプティブ div (つまり、親 div 内の子 div) に margin: 0 200px を設定し、 left の margin-left 属性値をに設定します。 100% の負の数、つまり margin-left: -100%; right の margin-left の属性値を、その幅の負の数、margin-left: -200px に設定します。

注: アダプティブ div は左右の前に配置し、親 div に含める必要があります。

html コード:

<body>        <div class="left">            200px        </div>        <div class="main">            自适应        </div>        <div class="right">            200px        </div></body>

ログイン後にコピー

css コード:

html,body {    margin: 0;    height: 100%;    padding: 0;    font-size: 30px;    font-weight: 500;    text-align: center;}.left,.right {    width: 200px;    display: inline;    height: 100%;    background-color: greenyellow;}.left {    float: left;}.right {    float: right;}.main {    position: absolute;    left: 200px;    right: 200px;    height: 100%;    background-color: azure;    display: inline;}

ログイン後にコピー

c、単独でフローティング、原則: 中央の列に margin 属性を設定すると、左と右の列がそれぞれフローティングされることを意味します。注: この方法を使用してレイアウトを調整する場合は、HTML の左右の後ろにアダプティブ列を配置する必要があります。

html コード:

<body>        <div class="main"> <!--看清楚，这里用一个父div包住-->            <div class="content">                自适应            </div>        </div>        <div class="left">            200px        </div>        <div class="right">            200px        </div></body>

ログイン後にコピー

css コード:

html,body {    margin: 0;    height: 100%;    padding: 0;    font-size: 30px;    font-weight: 500;    text-align: center;}.main {    width: 100%;    height: 100%;    float: left;}.main .content {    margin: 0 200px;    background-color: azure;    height: 100%;}.left,.right {    width: 200px;    height: 100%;    float: left;    background-color: greenyellow;}.left {    margin-left: -100%; //important}.right {    margin-left: -200px; //important}

ログイン後にコピー