面接の最初の質問です。答えてください。 _html/css

面接の最初の質問です。答えてください。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:24:38

オリジナル

1181 人が閲覧しました

フロントエンドのインタビューの質問 HTML CSS

既存の並列 3 列レイアウト構造は、左から右に A、B、C で、幅はそれぞれ 180px、600px、180px です。 HTML構造を変更せずにABC、CBA、BACの3つのレイアウトをCSSで実装し、CBA配置でB幅をアダプティブにする(3カラムの幅の合計が100%となる)必要があります。

ディスカッションへの返信 (解決策)

.container{			position:relative;			width:920px;			margin: 0 auto;			overflow:hidden;		}		.cola1,.colb1,.colc1,		.cola2,.colb2,.colc2,		.cola3,.colb3,.colc3{			height:100px;			text-align:center;			line-height: 100px;			color:#FFF;			font-size:24px;		}                .cola1{			float:left;			width: 160px;			background-color: #F00;		}		.colb1{			float:left;			width: 600px;			background-color: #0F0;		}		.colc1{			float:left;			width: 160px;			background-color: #00F;		}		.cola2{			position:absolute;			right:0;			top:0;			width: 160px;			background-color: #F00;		}		.colb2{			width:auto;			margin:0 160px;			background-color: #0F0;		}		.colc2{			position:absolute;			left:0;			top:0;			width: 160px;			background-color: #00F;		}		.cola3{			position:absolute;			left:600px;			top:0;			width: 160px;			background-color: #F00;		}		.colb3{			float:left;			width: 600px;			background-color: #0F0;		}		.colc3{			float:right;			width: 160px;			background-color: #00F;		}

ログイン後にコピー

<div class="container">	<div class="cola1">A</div>	<div class="colb1">B</div>	<div class="colc1">C</div></div><div class="container">	<div class="cola2">A</div>	<div class="colb2">B</div>	<div class="colc2">C</div></div><div class="container">	<div class="cola3">A</div>	<div class="colb3">B</div>	<div class="colc3">C</div></div>

ログイン後にコピー

2 の 1、2、3 はそれぞれ ABC、CBA、BAC の 3 つの状況に対応します。参考までに。

配置を変えてみてください

これはcss3のbox-direction:reverse(CBA)が関係しているのでしょうか? この方法でのみhtmlの構造を変更することはできません。

Position: ABSOLUTE; left:xxxpx;

1階正解

float、absolute（相対位置決め）を使用する場合、cba、bは最大幅max-width固定値を使用できるはずです

アプリケーションの習熟が必要であることフローティング、絶対 (相対位置決め)、および CBA の場合、b は最大幅 max-width 固定値
+1

を使用します