Question

我不是一个CSS人，你可以看到，我需要一些帮助，如何用两个图像制作这个div，如下图所示

enter image description here

Answer 1

<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>

Answer 2

托马斯是对的，但有一个更好的解决方案：

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

Answer 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/

Answer 4

由于您不是css家伙，因此只需创建此示例以帮助您了解div's http://jsfiddle.net/hT9xV/9/

正在发生的事情

如何将两个图像放在一个div的对角

4 个答案: