0

这样的代码：

<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 之外：

错误的 HTML 输出

我期望所有嵌套的 DIV 都出现在父 DIV 内：

预期的 HTML 输出

无论父 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>

生产

在此处输入图像描述

4

3 回答 3

2

使用 css 的 position 属性

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

演示

或使用 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>

演示

于 2013-06-27T15:45:17.047 回答
2

您可以使用 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/

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

于 2013-06-27T15:56:44.703 回答
2

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

上面的 Ankit 已经回答了 position:absolute 的示例

于 2013-06-27T15:46:22.467 回答