关于并列的三列布局结构,从左至右依次为 A, B, C, 宽度分别为180px, 600px, 180px。要求在不改变 HTML 结构的情况下用CSS实现:ABC,CBA,BAC 三种布局及在CBA排列下使B宽度自适应(三列总宽度100%);
HTML 与 CSS如下:
<!DOCTYPE html>
<html>
<head>
<title>HTML/CSS</title>
<style type="text/css">
.container{
width: 960px;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.cola1,.cola2,.cola3,.colb1,.colb2,.colb3,.colc1,.colc2,.colc3{
text-align: center;
height: 100px;
line-height: 100px;
color: #fff;
font-size: 24px;
}
.cola1{
float: left;
width:180px;
background-color: #f00;
}
.colb1{
width: 600px;
float: left;
background-color: #0f0;
}
.colc1{
width: 180px;
float: left;
background-color: #00f;
}
.cola2{
width: 180px;
position: absolute;
right: 0;
top:0;
background-color: #f00;
}
.colb2{
width: auto;
margin:0 180px;
background-color: #0f0;
}
.colc2{
width: 180px;
left: 0;
top: 0;
position: absolute;
background-color: #00f;
}
.cola3{
width: 180px;
background-color: #f00;
position: absolute;
left: 600px;
top: 0;
}
.colb3{
width: 600px;
float: left;
background-color: #0f0;
}
.colc3{
float: right;
width: 180px;
background-color: #00f;
}
</style>
</head>
<body>
<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>
</body>
</html>