Question

<div id = "l-leftcontainer" style="width:454px; height:300px;float:left"></div>
<div id = "l-rightcontainer" style="width:200px; height:300px;position:relative;right:0;z-index:2;overflow=hidden"> <img src="Test images/DS.png" width="200" height="200" border="0" /></div>

我把两个div放在一起，第二个是图像。每当我测试它时，图像跳出div并在其他所有内容下呈现。我不能在第二个div上使用float或其他有意溢出的div会推送它。我该怎么做才能解决这个问题？

Answer 1

如何将display: inline-block与vertical-align:top一起使用而不是浮动position:relative + right: 0？

<div id = "l-leftcontainer" style="width:454px; height:300px;display:inline-block;vertical-align:top;border:1px solid #000;"></div>
<div id = "l-rightcontainer" style="width:200px; height:300px;display:inline-block;vertical-align:top;overflow=hidden;border:1px solid #000;"></div>

Answer 2

简单地嵌套div：

<div id="l-leftcontainer" style="width:454px;background:red; height:300px;">
    <div id="l-rightcontainer" style="background:blue;width:200px; height:300px;"> <img src="Test images/DS.png" style="" width="200" height="200" border="0"></div></div>

您寻求的行为可以通过HTML来实现，而这正是它的用途。注意我没有使用CSS进行定位，让HTML完成所有工作。查看fiddle

图像不断跳出div？

2 个答案: