A front-end interview question, please answer it! _html/css

A front-end interview question, please answer it! _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:24:38

Original

1181 people have browsed it

Front-end interview questions html css

The existing parallel three-column layout structure is A, B, C from left to right, with widths of 180px, 600px, and 180px respectively. It is required to use CSS to implement three layouts: ABC, CBA, and BAC without changing the HTML structure, and to make the B width adaptive under the CBA arrangement (the total width of the three columns is 100%).

Reply to the discussion (solution)

.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;		}

Copy after login

<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>

Copy after login

1, 2, and 3 respectively correspond to the three situations ABC, CBA, BAC is for reference, B in 2 can be adaptive.

Try changing the positioning

Does this involve box-direction:reverse (CBA) of css3? Only in this way can the structure of html be not changed.

position: absolute; left:xxxpx;

1st floor Correct answer

It should be that you need to be proficient in using float, absolute (relative positioning), cba, but use the maximum width when b The max-width fixed value

should require proficiency in using floating, absolute (relative positioning), and cba. When b, use the maximum width max-width fixed value
1