如何组织优先级div？

Question

我有3个对象：

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="center">Center</div>     
</div>

定义以下CSS概述：

<style>
    body{width: 100%;padding: 0; margin: 0;}  
    .container{width:960px; margin:30px auto;}
    .left{width:25%; height:100px; background:#f60;;}
    .right{width:25%; height:100px; background:#ff0;;}
    .center{width:50%; height:100px;  background:#f0f;;}
</style>

要求是我根据以下优先级对div进行了排序：

1 /左 - 右 - 中心

.left{float:left;}
.right{float:left;}
.center{float:left;}

2 /左 - 中 - 右

.left{float:left;}
.right{float:right;}
.center{float:left;}

3 /中 - 右 - 左

.left{float:right;}
.right{float:right;}
.center{float:left;}

4 /右 - 中 - 左

.left{float:right;}
.right{float:left;}
.center{float:right;}

5 /右 - 左 - 中心???

6 /中 - 左 - 右???

要求（5）和（6）我做不到。 如果我使用position:absolute可以执行此操作，但是当我更改浏览器的宽度时，“容器”不会自动调整高度（我使用响应主题 - 将div除以百分比）

任何人都有CSS解决方案，而无需更改HTML代码中的任何内容吗？

Answer 1

根据您想要的位置中其他Div的宽度，尝试使用position: absolute;和left。和position: relative;到容器。