Question

我在尝试在图像周围创建不规则的换行线时遇到了一些麻烦。基本上我给了一张图像的6个“切片”，我要将它放在一起以给出幻觉它是一个图像;文字整齐地包裹在它的左边。

我被指示使用嵌入式样式表执行此操作。我所做的是将每个'slice'包装在一个div中（所以我可以设置每个切片的宽度），然后将所有这些div包装成一个id为“images”的div。

现在，在我的脑海里，我有以下代码：

<style type="text/css">
    #images {
        float: right;
        clear: right;
        margin: 0em 0em 0em 2em
    }
</style>

现在，图像被放在一起，如同之间没有间隙，但是所有图像都没有正确地浮动到右边。事实上，它看起来好像是左对齐的切片。如果它们是正确对齐的，那么看起来是正确的。

此外，本书要求将样式应用于“内嵌图像”。这对于段落，标题和地址很容易，但除了像我刚才那样使用大量的div之外，我如何将样式应用于内嵌图像？

这里要求的是图像div的代码：

   <div id="images">
      <div style="width:6.7em"><img src="king1.gif" alt=""></div>
      <div style="width:7.85em"><img src="king2.gif" alt=""></div>
      <div style="width:11.45em"><img src="king3.gif" alt=""></div>
      <div style="width:14.25em"><img src="king4.gif" alt=""></div>
      <div style="width:15.5em"><img src="king5.gif" alt=""></div>
      <div style="width:16.6em"><img src="king6.gif" alt=""></div>
   </div>

另外，我尝试了以下无效：

img {
    float: right;
    clear: right;
    margin: 0 0 0 2em;
}

Answer 1

为什么要在图像周围添加额外的div？只需在每张图片上使用这种确切的样式，请参阅http://jsfiddle.net/NGLN/B33kA/。

img {
    float: right;
    clear: right;
    margin: 0 0 0 2em;
}

使用嵌入式样式表修改内嵌图像

1 个答案: