Question

我正在尝试在CSS中创建嵌套框并在整个内容中放置图片（或Flash影片）。问题是IE至少在图片下面增加了一个750 x 4大小的空白空间。有没有办法摆脱那个空白的空间？

我应该如何更改以下代码？

    <div style="border:solid 4px #FFFFFF; width:768px;">
    <div style="border:solid 1px #E6E6E6;">
    <div style="border:solid 1px #FFFFFF;">
    <div style="border:solid 1px #CCCCCC;">
    <div style="border:solid 1px #FFFFFF;">
    <div style="border:solid 1px #E6E6E6;">
    <div>
    <img src="test.gif" width=750px; height: 138px;>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

Answer 1

<img src="test.gif" width=750px; height: 138px;>

你在该行上有一些无效的HTML（宽度和高度部分）。尝试这样的事情：

<img src="test.gif" style="width:750px; height: 138px;">

当然，正确的方法是摆脱所有内联CSS样式，用类名和ID替换它们，并通过CSS定义类的样式。

Answer 2

尝试：

<div style="border:solid 4px #FFFFFF; width:768px; overflow:hidden;">
<div style="border:solid 1px #E6E6E6;">
<div style="border:solid 1px #FFFFFF;">
<div style="border:solid 1px #CCCCCC;">
<div style="border:solid 1px #FFFFFF;">
<div style="border:solid 1px #E6E6E6;">
<div style="overflow:hidden;">
<img src="test.gif" width=750px; height: 138px;>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 3

使您的代码有效：

<img src="test.gif" width="750" height="138" />

图片代码支持宽度和高度，但不需要像素值。

尝试使用样式表，内联样式是不好的做法。

如何嵌套这些盒子？

3 个答案: