如何将两个图像定位在一个div的对角答案

【问题标题】：How to position two images in opposite corners of one div如何将两个图像定位在一个div的对角
【发布时间】：2011-05-17 19:32:21
【问题描述】：

如你所见，我不是 CSS 专家，我需要一点帮助来制作包含两张图片的 div，如下图所示

【问题讨论】：

仅供参考，不需要 div 的对角，但我只是给你一个视觉外观而不是试图解释。

标签： css image positioning

【解决方案1】：

Thomas 是对的，但还有更好的解决方案：

<style type="text/css">

    #content {width: 500px;}

    .align-left { float: left; }
    .align-right { float: right; }

</style>

<div id="content">

    <img class="align-left" src="link to your image" alt="description of your image" width="100" height="100" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <img class="align-right" src="link to your image" alt="description of your image" width="100" height="100" />
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div><!-- end content -->

在这种情况下，类比 ID 更有用。

【讨论】：

alt 不是图片的描述！
可以，如果图片是链接，最好写下链接的目的地。 - 如果图像只是装饰性的，您可以将其留空 - 如果图像有意义，您应该描述图片中的内容。更多信息在这里>w3schools.com/tags/att_img_alt.asp
你使用title，如果我明白你想说的话！
标题不同：查看此链接> w3schools.com/tags/att_img_alt.asp
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. 我们正在讨论 2 个不同的观点，同时考虑到 2 个不同的事情，所以没有必要进一步讨论这个话题；）用户会被通知轰炸！ :)

【解决方案2】：

<style type="text/css">
#container {
   width:760px;
   border:1px solid #999;
   margin:20px auto 0;
   overflow:hidden;
 }
#top-left {
   float:left;
 }
#bottom-right {
   float:right;
   clear:both;
 }
</style>

</head>
<body>

<div id="container">
  <img id="top-left" src="" alt="">
  <img id="bottom-right" src="" alt="">
</div>

【讨论】：

如果没有文本可能导致容器 div 的高度增长到大于两个图像的大小，这将仅提供左上角右下角设置。这是从clear:both 强制中断的两张图像 - 底部图像可能不会一直位于 div 的底部。不过，这可能是他想要的。

【解决方案3】：

你需要float左右图片。

这是 CSS：

img {width:100px; height:100px; border:1px solid; margin:1em;}

.image1 {float:left;}
.image2 {float:right;}

floats 需要明确设置宽度

这是一个 jsfiddle：

编辑：更新了 jsfiddle 以包含周围的 div

http://jsfiddle.net/RQp5Z/1/

【讨论】：

你应该使用有意义的类，这样你就可以在其他地方重用它们。所以不是 .image1 & 2 而是 alignleft & alignright （或类似的东西）。
我同意有意义的名字更好@lipelip。我只是为示例创建这些名称。不过，我不会使用alignleft 或alignright，以防我将来想改变它们的对齐方式（比如换边）

【解决方案4】：

由于您不是 css 专家，因此创建了这个示例来帮助您了解 div's http://jsfiddle.net/hT9xV/9/ 的情况

【讨论】：