修复了连续<div> s </div>的双列定位

Question

我有三个连续的<div>需要放在两列中，第一列<div>占据第一列，其余占据右列，如下图所示{{3 }}。在jsfiddle中我使用width约束强制float s到位。这可以用另一种方式完成而不使用width约束吗？ <div>的顺序无法更改。

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

Answer 1

您可以从右侧div中删除float，然后添加一个略大于左侧div宽度的margin-left - http://jsfiddle.net/cx6VJ/2/

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

Answer 2

您可以使用固定定位和百分比宽度来执行此操作。

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%;
}

Answer 3

感谢@Amit和@ user1823713提供的帮助，我使用他们的答案组合来获得保持<div> s'相对位置的东西，并使其宽度适应容器的宽度。这是结果jsfiddle。

可以将此布局插入容器中而不进行任何更改，最终在容器上设置单个宽度以限制总布局宽度。

Answer 4

我只是提供这个，因为它被要求：

  

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

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

http://jsfiddle.net/Ma9EE/

<table>
<tr><td rowspan="2">Image</td>
  <td>summary</td></tr>
  <tr><td>info</td></tr>
</table>

Answer 5

Flexbox可能是一个理想的选择，但支持尚未普及。如果您不介意它在IE9或更早版本中不起作用，则可以使用columns执行此操作。您需要为Mozilla和Webkit添加前缀。

http://jsfiddle.net/cx6VJ/4/

#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;
}

我故意让right元素比你的演示小，但你可以将它们的大小增加到200px，它们仍然会有所需的布局。

http://caniuse.com/#feat=multicolumn