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

前端 面试题 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;}

登录后复制

A
B
C
A
B
C
A
B
C

登录后复制
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