前端 面试题 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>
改变定位试试
这个是不是涉及到css3的box-direction:reverse(CBA),只有这样才能不改变html的结构。
position：absolute; left:xxxpx;
1楼 正解
应该就是要求熟练应用浮动、绝对（相对定位）、cba的时候b可是使用最大宽度max-width定值
应该就是要求熟练应用浮动、绝对（相对定位）、cba的时候b可是使用最大宽度max-width定值
+1
