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
+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
+1