ホームページ > ウェブフロントエンド > htmlチュートリアル > cssでは左側が固定、右側がadaptive_html/css_WEB-ITnose

cssでは左側が固定、右側がadaptive_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:36:16
オリジナル
1261 人が閲覧しました

私が働き始めたときの面接の質問について話しましょう

Pacific Network で面接をしていたとき、面接官が次の質問をしたことを覚えています: 外側の div があり、中央に左側と右側に 2 つの div があります。 div は必須です Side div

1. 幅のみを指定します; 2. 高さのみを指定します; 3. 幅と高さを指定します (3 つの方法をまとめました) HTML:

<div class="container"><div class="left">左侧固定宽度200px</div><div class="right">右侧自适应</div></div>
ログイン後にコピー

No1: 方法 1

.container{width: 100%; }.left{color:red; background: gray; float: left; height: 100px}//左侧的div.right{color:red; background: blue; margin-left: -200px;}//右侧的div
ログイン後にコピー

No2 : 方法 2

.container{width: 100%;}.left {width:200px; background:#fcc; position:absolute; left:0 ;z-index:1 }.right {width:100%; background:#ccc; position:absolute; left:0}
ログイン後にコピー

int in in No5: Method 5

.container{width:100%}.left { background-color: green; float: left; width: 200px; margin-right: -100%; }.right { float: left; width: 100%;margin-left: 200px; background-color:blue; }
ログイン後にコピー

実際、これを達成する方法はたくさんあります (他の方法を書くのが面倒なので )、よく言われるように、すべての道はローマに通ず、咳咳、嫌ならスプレーしないでください

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート