0

我写了这段代码：

<body>
<div>
    <div style="padding:10px;float:left;height:500px;background-color:#ff6a00;">
        Div1 -> Floated
    </div>
    <div style="padding:10px;height:600px;background-color:#5c64bb;display:-webkit-flex">
        Div2 -> Not Floated
    </div>
</div>

结果是下图，我可以使用仅在 chrome 中工作的 -webkit-flex display 来实现这个结果，有没有什么想法可以给我同样的结果。

顺便说一句，我也不想对 Div2 使用 margin-left 和 position absolute 。

在此处输入图像描述

4

2 回答 2

1

如果您不介意为左侧指定静态宽度，则可以通过以下方式实现右侧的 flex 类型布局：

<div style="display:table;width:100%;">
    <div style="display:table-cell;width:130px;vertical-align:top;">
        <div style="padding:10px;height:500px;background-color:#ff6a00;">
            Div1
        </div>
    </div>
    <div style="display:table-cell;vertical-align:top;">
        <div style="padding:10px;height:600px;background-color:#5c64bb;">
            Div2
        </div>
    </div>
</div>

http://jsfiddle.net/LHZKp/

于 2013-10-20T15:07:09.087 回答
0

我能够使用display: inline-block;第二个 div 和百分比宽度获得类似的效果。

<div>
    <div style="padding:10px;float:left;height:500px;background-color:#ff6a00;width:15%;">
        Div1 -> Floated
    </div>
    <div style="padding:10px;height:600px;width: 80%;background-color:#5c64bb;display:inline-block;">
        Div2 -> Not Floated
    </div>
</div>

小提琴

于 2013-10-20T14:37:39.573 回答