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

css 共通アダプティブレイアウト_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:30:25

オリジナル

1149 人が閲覧しました

1. 左側に固定幅、右側に適応幅を持つ 2 列のレイアウト

1.1. 左側にフローティング、右側に margin-left を設定します

1.2.フローティング

/*    1.利用浮动进行布局*/    .left {        float: left;        width: 200px;        height: 200px;        background-color: cornflowerblue;    }    .right {        margin-left: 200px;        height: 200px;        background-color: bisque;    }    <div class="left"></div>    <div class="right"></div>

ログイン後にコピー

を置き換えます

2. 右側に固定幅、左側に適応幅を持つ 2 列のレイアウト

2.1. フローティング

/*    2.利用绝对定位进行布局*/    .wrap {        position: relative;    }    .left {        position: absolute;        top: 0;        left: 0;        width: 200px;        height: 200px;        background-color: cornflowerblue;    }    .right {        margin-left: 200px;        height: 200px;        background-color: bisque;    }    <div class="wrap">        <div class="left"></div>        <div class="right"></div>    </div>

ログイン後にコピー

を使用したレイアウト

注: right は left の前に記述する必要があります。そうでないと、次のような問題が発生します。その後、Baidu はしばらく検索し、最終的に次の段落を見つけました (まず、フローティング要素は次の要素にのみ影響することを理解する必要があります。フローティング要素自体はフローティングではなく、ドキュメントフローから切り離されているだけです。次の要素は移動します)あなたが言ったことによると、それを完了するには、負のマージンを使用して浮動要素を持ち上げる必要があります）。 ...

4.1. フローティングを使用して

/*    1.利用浮动进行布局*/    .left {        margin-right: 200px;        height: 200px;        background-color: cornflowerblue;    }    .right {        float: right;        width: 200px;        height: 200px;        background-color: bisque;    }    <div class="right"></div>    <div class="left"></div>

ログイン後にコピー

を実現する

4.2. 絶対位置を使用して

/*    2.利用绝对定位进行布局*/    .wrap {        position: relative;    }    .left {        margin-right: 200px;        height: 200px;        background-color: cornflowerblue;    }    .right {        position: absolute;        top: 0;        right: 0;        width: 200px;        height: 200px;        background-color: bisque;    }    <div class="wrap">        <div class="left"></div>        <div class="right"></div>    </div>

ログイン後にコピー

/*    1.常规实现方式*/    .left,    .right {        width: 50%;        height: 200px;        background-color: cornflowerblue;    }    .left {        margin-left: -300px;        float: left;    }    .right {        margin-right: -300px;        float: right;    }    .center {        margin: 0 auto;        width: 600px;        height: 200px;        background-color: bisque;    }    <div class="right"></div>    <div class="left"></div>    <div class="center"></div>

ログイン後にコピー

/*    1.浮动实现方式*/        .left,        .right {            width: 300px;            height: 200px;            background-color: cornflowerblue;        }        .left {            float: left;        }        .right {            float: right;        }        .center {            margin: 0 300px;            height: 200px;            background-color: bisque;        }        <div class="right"></div>    <div class="left"></div>    <div class="center"></div>

ログイン後にコピー

/*    2.绝对定位方式实现*/        .left,        .right {            position: absolute;            top: 0;            width: 300px;            height: 200px;            background-color: cornflowerblue;        }        .left {            left: 0;        }        .right {            right: 0;        }        .center {            margin: 0 300px;            height: 200px;            background-color: bisque;        }        <div class="right"></div>        <div class="left"></div>        <div class="center"></div>

ログイン後にコピー

を実現する