css-float - 如何组织优先级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;with 。left和position: relative;容器。