Question

我写了这段代码：

<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>

结果是下面的图像，我可以通过使用-webkit-flex显示来实现这个结果，它只能在chrome中运行，有什么想法可以给我相同的结果。

顺便说一句，我不想使用margin-left作为Div2并且也可以使用absolute。

enter image description here

Answer 1

如果您不介意为左侧指定静态宽度，可以使用此方法实现右侧的弹性类型布局：

<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/

Answer 2

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

<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>

fiddle

浮动和宽度100％

2 个答案: