css布局列表,自适应

关于并列的三列布局结构,从左至右依次为 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{
             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;
             180px;
             background-color: #f00;
       }
       .colb1{
              600px;
              float: left;
              background-color: #0f0;
       }
       .colc1{
             180px;
             float: left;
             background-color: #00f;
       }
       .cola2{
             180px;
             position: absolute;
             right: 0;
             top:0;
             background-color: #f00;
       }
       .colb2{
             auto;
             margin:0 180px;
             background-color: #0f0;
       }
       .colc2{
             180px;
             left: 0;
             top: 0;
             position: absolute;
             background-color: #00f;
       }
       .cola3{
             180px;
             background-color: #f00;
             position: absolute;
             left: 600px;
             top: 0;
       }
       .colb3{
             600px;
             float: left;
             background-color: #0f0;
       }
       .colc3{
             float: right;
             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>

原文地址:https://www.cnblogs.com/fxy0919/p/6076802.html