Css 固定两列连续定位<；部门>；s

我有三个连续的

需要放置在两列中，第一个

占据第一列，其余占据右列，如下图和所示。在jsfiddle中，我使用

width

约束强制

浮动

s就位。这是否可以通过另一种方式实现，并且不使用

宽度
约束？无法更改
的顺序


我更喜欢使用尽可能少的固定
宽度的解决方案。
您可以从右div中删除
浮动
，并在左div中添加略大于左div宽度的
边距

如果不希望左div的宽度固定，则可以设置宽度和左边距的百分比。
可以使用固定定位和百分比宽度

CSS代码：

.image {
    position:fixed;
    top:0px;
    left:0px;
    width:75%;
    height:100%;
}
.summary {
    position:fixed;
    top:0px;
    left:75%;
    width:25%;
    height:50%;
}
.info {
    position:fixed;
    top:50%;
    left:75%;
    width:25%;
    height:50%;
}

我之所以提供此服务，是因为有人要求：

我更喜欢使用尽可能少的固定宽度的解决方案

下面是一个没有div的解决方案（它使用一个表）：



形象
总结
信息
Flexbox可能是实现这一点的理想选择，但支持还没有普及。如果您不介意它在IE9或更早版本中不起作用，您可以使用
列
。您需要为Mozilla和Webkit添加前缀


我故意使
右侧的
元素比您的演示小，但是您可以将它们的大小增加到200px，它们仍然具有所需的布局

多亏@Amit和@user1823713提供的帮助，我将他们的答案结合起来，得到了一些保持
s相对位置并根据容器宽度调整宽度的东西。下面是结果

此布局可以插入到容器中而不做任何更改，最终在容器上设置一个宽度来约束总布局宽度

元素是否保证具有特定的高度？如果
#container
div设置了明确的宽度和高度，则可以使用绝对定位在其中安排3个div。我看到了实现它的其他选项，但请向我们提供更多关于对容器应用哪些限制的信息。@cimmanon
元素将具有不同的高度。列的宽度应该相同。不幸的是，我不能更改
标记。这看起来像是一个用于布局而不是用于表示表格数据的表格。@seron-“不幸的是，我不能更改标记”真的吗？为什么不呢？@Steve因为HTML标签是由一个系统（WooCommerce，WordPress的电子商务插件）生成的，我对它的控制有限<代码>
高度可能因内容而异。如何调整此解决方案，使
.info
始终位于
.summary
的正下方？即使使用百分比，固定位置的
也将具有固定的宽度和高度。
<table>
<tr><td rowspan="2">Image</td>
  <td>summary</td></tr>
  <tr><td>info</td></tr>
</table>

#container {
    background-color: orange;
    width: 408px;
    columns: 2;
}

#container > div {
 /*   break-inside: avoid-column;*/
}

#left {
    border: 2px solid green;
    min-height: 200px;
    break-after: column;
}

.right {
    border: 2px solid blue;
    height: 50px;
}

#red {
    border: 2px solid red;
}