0

我有三个连续<div>的 s 需要放置在两列中，<div>第一列占据第一列，其余的占据右列，如下图和这个 jsfiddle 所示。在 jsfiddle 中，我使用width约束来强制floats 到位。这可以通过另一种方式而不使用width约束来完成吗？s的顺序<div>不能改变。

布局

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

4

5 回答 5

1

您可以float从右侧 div 中删除，并添加margin-left比左侧 div 稍大的宽度 - http://jsfiddle.net/cx6VJ/2/

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

于 2012-12-25T15:45:24.277 回答
1

您可以使用固定定位和百分比宽度来做到这一点。

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%;
}
于 2012-12-25T15:49:05.467 回答
0

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

这种布局可以不加任何更改地插入到容器中，最终在容器上设置一个宽度来限制总布局宽度。

布局

于 2012-12-25T17:31:56.837 回答
-1

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

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

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

http://jsfiddle.net/Ma9EE/

<table>
<tr><td rowspan="2">Image</td>
  <td>summary</td></tr>
  <tr><td>info</td></tr>
</table>
于 2012-12-25T15:54:01.213 回答
-1

Flexbox 可能是一个理想的选择，但支持还不是很广泛。columns如果您不介意它在 IE9 或更早版本中不起作用，您可以这样做。您需要为 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元素比你的演示小，但你可以将它们的大小增加到 200 像素，它们仍然具有所需的布局。

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

于 2012-12-25T15:54:24.423 回答