一道前端面试题,求大神解答!

时间:2021-01-01 19:06:02
现有并列的三列布局结构,从左至右依次为 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

#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