一道前端面试题，求大神解答！_html/css_WEB-ITnose-html教程-PHP中文网

一道前端面试题，求大神解答！_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:24:38

原创

1318人浏览过

前端面试题 html css

现有并列的三列布局结构，从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。要求在不改变 HTML 结构的情况下用CSS实现：ABC，CBA，BAC 三种布局及在CBA排列下使B宽度自适应（三列总宽度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>

登录后复制

1、2、3分别对应三种情况ABC、CBA、BAC供参考，2中B可以自适应。

改变定位试试

这个是不是涉及到css3的box-direction:reverse(CBA),只有这样才能不改变html的结构。

position：absolute; left:xxxpx;

1楼正解

应该就是要求熟练应用浮动、绝对（相对定位）、cba的时候b可是使用最大宽度max-width定值

应该就是要求熟练应用浮动、绝对（相对定位）、cba的时候b可是使用最大宽度max-width定值
+1