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

【问题标题】：Using embedded style sheet to modify inline images使用嵌入式样式表修改内联图像
【发布时间】：2011-06-18 20:58:22
【问题描述】：

我在尝试在图像周围创建不规则线条时遇到了一些麻烦。基本上，我得到了一张图像的 6 个“切片”，我将它们放在一起，以产生一种错觉，它是一个图像；文本整齐地环绕在它的左侧。

我被指示使用嵌入式样式表执行此操作。我所做的是将每个“切片”包装在一个 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;
}

【问题讨论】：

您可以使用后代选择器。 #images div{} 或 #images img{} 之类的东西。但是#images{align:right;} 没有帮助吗？如果您添加图像的 html 及其容器 (#images)，那就太好了。现在有点猜测了。

标签： html image coding-style

【解决方案1】：

为什么要在图片周围加上一个额外的 div？只需在每张图片上使用该样式即可，请参阅 http://jsfiddle.net/NGLN/B33kA/。

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

【讨论】：