如何在一个div的对角放置两个图像 [英] How to position two images in opposite corners of one div

问题描述

我不是一个CSS的家伙，你可以看到，我需要很少的帮助，如何使用两个图像，如下图

I am not a CSS guy as you can see and I need little help on how to make this div with two images, like the drawing below

推荐答案

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

Thomas is right but there's a even better solution:

<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更有用。

class are more usefull than ID in this case.

这篇关于如何在一个div的对角放置两个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！