検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS レイアウト: 左側は固定幅、右側はアダプティブ_html/css_WEB-ITnose

CSS レイアウト: 左側は固定幅、右側はアダプティブ_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:45:58929ブラウズ

左側が固定幅、右側が適応幅です

それを実現するにはたくさんの方法があります

ウィンドウを縮小してみてはいかがでしょうか？

オプション 1:

左にフロートし、右側にマージン左を追加します

デモを見る 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(1)</title><style type="text/css">    *{margin: 0;padding: 0;}    .left{        float: left;        width: 200px;        border: 1px solid #333;        background: #aaa;    }    .right{        margin-left:200px;        border: 1px solid #333;        background: #ccc;        word-break: break-all;    }</style></head><body>    <div class="left">    <h4>left</h4>        <p>oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000</p>    </div>    <div class="right">    <h4>right</h4>        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888</p>    </div></body></html>

オプション 2: 左に浮き、オーバーフロー右側: 非表示 ただし、この方法は IE6 と互換性がありません

Viewdemo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(2)</title><style type="text/css">    *{margin: 0;padding: 0;}    .left{        float: left;        width: 200px;        border: 1px solid #333;        background: #aaa;    }    .right{        overflow: hidden;        border: 1px solid #333;        background: #ccc;        word-break: break-all;    }</style></head><body>    <div class="left">    <h4>left</h4>        <p>oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000</p>    </div>    <div class="right">    <h4>right</h4>        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888</p>    </div></body></html>

オプション 3:

左側に絶対配置を使用し、右側にマージン左を使用します

デモを見る

すごい

オプション 4:

左側に絶対位置決め、右側に絶対位置決め

デモを見る

そうだね

オプション 5:

この方法は比較的複雑で、右側の div 内に別の div があります

View

demo 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>左侧定宽，右侧自适应(3)</title><style type="text/css">    *{margin: 0;padding: 0;}    .left{        position: absolute;        top: 0;        left: 0;        width: 200px;        border: 1px solid #333;        background: #aaa;    }    .right{        margin-left:200px;        border: 1px solid #333;        background: #ccc;        word-break: break-all;    }</style></head><body>    <div class="left">    <h4>left</h4>        <p>oooooooooooooo        0000000000000000        00000000000000000        ooooooooooooooo        ooooooooooooooo        000000000000000</p>    </div>    <div class="right">    <h4>right</h4>        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888        BBBBBBBBBBBBBBBBBBBBBBBBBBBBB        888888888888888888888888888888888</p>    </div></body></html>

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：フロントエンドの高度なテストの質問 css_html/css_WEB-ITnose次の記事：フロントエンドの高度なテストの質問 css_html/css_WEB-ITnose

関連記事

続きを見る