html - 图像不断跳出div？

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-blockwithvertical-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 完成所有工作。看看小提琴