一道前端面试题，求大神解答！

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

7 个解决方案

#1

.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可以自适应。

#2

改变定位试试

#3

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

#4

position：absolute; left:xxxpx;

#5

1楼  正解

#6

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

#7

引用 6 楼 emperor_v5 的回复:

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

+1