如何在响应式设计中向右拉出元素

Question

以下是我试图实现的布局：

Mobile:                            Desktop:
+-------------------+        +-----------+---------------------+
|         C         |        |     C     |                     |
+-------------------+        +-----------+                     |
|                   |        |     P     |                     |
|                   |        +-----------+                     |
|         V         |        |           |          V          |
|                   |        |           |                     |
|                   |        |           |                     |
+-------------------+        |           |                     |
|         P         |        |           |                     |
+-------------------+        +-----------+---------------------+
100%                    300px        100% - 300px

因此，如果屏幕足够宽(min-width: 960px(，则元素V会从其他两个元素之间拉出，并向右移动。

请注意，没有一个元件(包括外部容器(具有固定的已知高度。它们都必须自动调整大小以适应其内容。

移动版本也是DOM的合理顺序，所以让我们使用这个HTML:

<div class="outer">
<div class="C"></div>
<div class="V"></div>
<div class="P"></div>
</div>

我第一次尝试使用flexbox:实现桌面布局

@media screen and (min-width: 960px) {
.outer {
display: flex;
flex-direction: column;
}
.C { order: 1; width: 300px; }
.V { order: 3; }
.P { order: 2; width: 300px; }
}

这可以处理重新排序，但似乎没有办法在不设置固定高度的情况下强制在P和V之间进行换行。因此，这些元素仍然堆叠在一起。

我还试着用一个浮子把V拉出：

@media screen and (min-width: 960px) {
.C { width: 300px; }
.V { width: calc(100% - 300px); margin-left: 300px; float: right; }
.P { width: 300px; }
}

但它最终会低于C。为了解决这个问题，我必须更改DOM顺序，出于可访问性的原因，我宁愿不这样做。

我也可以用绝对定位将V拉出：

@media screen and (min-width: 960px) {
.outer { position: relative; }
.C { width: 300px; }
.V { width: calc(100% - 300px); right: 0; top: 0; }
.P { width: 300px; }
}

问题是V不再影响outerdiv的高度，并开始重叠outer以下的内容。

最后，我考虑了CSSgrid，但它会降低浏览器兼容性。

有没有一种方法可以在不使用丑陋的技巧的情况下创建这种布局？

Answer 1

添加更多浮动：

@media screen and (min-width: 960px) {
.C {
width: 300px;
float: left;
}
.V {
width: calc(100% - 300px);
float: right;
}
.P {
width: 300px;
clear: left; /* clear only left to go under C */
}
.outer {
overflow: auto; /* create a BFC to avoid the float getting outside the container */
}
}
.outer {
margin:10px;
}

<div class="outer">
<div class="C" style="height:50px;background:red"></div>
<div class="V" style="height:150px;background:blue"></div>
<div class="P" style="height:60px;background:green"></div>
</div>

<div class="outer">
<div class="C" style="height:50px;background:red"></div>
<div class="V" style="height:100px;background:blue"></div>
<div class="P" style="height:100px;background:green"></div>
</div>
<div class="outer">
<div class="C" style="height:100px;background:red"></div>
<div class="V" style="height:50px;background:blue"></div>
<div class="P" style="height:50px;background:green"></div>
</div>

或者像下面这样的CSS网格：

@media screen and (min-width: 960px) {
.V {
grid-row:span 3;
}
.outer {
display:grid;
grid-template-columns:300px 1fr;
align-items:start;
}
}
.outer {
margin:10px;
}

<div class="outer">
<div class="C" style="height:50px;background:red"></div>
<div class="V" style="height:150px;background:blue"></div>
<div class="P" style="height:60px;background:green"></div>
</div>

<div class="outer">
<div class="C" style="height:50px;background:red"></div>
<div class="V" style="height:100px;background:blue"></div>
<div class="P" style="height:100px;background:green"></div>
</div>
<div class="outer">
<div class="C" style="height:100px;background:red"></div>
<div class="V" style="height:50px;background:blue"></div>
<div class="P" style="height:50px;background:green"></div>
</div>