日期:2014-5-16 浏览次数:20104次

一道前端面试题,求大神解答!
现有并列的三列布局结构,从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。要求在不改变 HTML 结构的情况下用CSS实现:ABC,CBA,BAC 三种布局及在CBA排列下使B宽度自适应(三列总宽度100%)。
前端 面试题 html css

------解决方案--------------------
.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可以自适应。

------解决方案--------------------
改变定位试试
------解决方案--------------------
position:absolute; left:xxxpx;
------解决方案--------------------
1楼  正解
------解决方案--------------------
应该就是要求熟练应用浮动、绝对(相对定位)、cba的时候b可是使用最大宽度max-width定值