Question

这样的代码：

<html>
<head>
<style type="text/css">
html, body {height:100px; width:200px}
body {margin:0}
</style>
</head>
<body>
<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px;">
</div>
<div style="background:yellow; height:100%;">
</div>
</div>
</body>
</html>

使第二个嵌套DIV出现在所有浏览器中的父DIV之外：

wrong HTML output

我期待所有嵌套的DIV出现在父DIV中：

expected HTML output

我希望黄色DIV能够填充宽度的其余部分，无论父级DIV大小。

请注意，html, body {height:100px; width:200px}仅用于制作体面大小的屏幕截图。它应该是html, body {height:100%; width:200%}

更新

包含display: inline-block的代码：

<div style="background:red; height:100%">
<div style="background:green; height:100%; width:50px; display:inline-block;">
</div>
<div style="background:yellow; height:100%; display:inline-block;">
lalala
</div>
</div>

产生

enter image description here

Answer 1

使用css的位置属性

<div style="background:red; position:relative; height:100%">
<div style="background:green; height:100%;position:absolute; top:0px;left:0px; width:50px;">
</div>
<div style="background:yellow;position:absolute;left:50px;top:0px; height:100%;width:100%;">
</div>
</div>

DEMO

OR 使用CSS的float属性

<div style="background:red; height:100%">
<div style="background:green; height:100%;float:left;width:50px;">
</div>
<div style="background:yellow; height:100%;">
</div>
</div>

DEMO

Answer 2

在这种情况下，您可以使用position：absolute或float：left。

上面的Ankit已经回答了position：absolute的例子

Answer 3

你可以使用float left作为绿色div：

<body>
    <div style="background:red; height:100%">
        <div style="background:green; height:100%; width:50px; display:inline-block; float:left"></div>
        <div style="background:yellow; height:100%;"></div>
    </div>
</body>

您可以更改html / body或红色容器div的宽度，黄色div将适当增长/缩小：

http://jsfiddle.net/RapKB/1/

编辑：哎呀，你不需要内联块。

HTML：两个嵌套DIV中的一个出现在父DIV之外

3 个答案: