How to position two images in opposite corners of

2019-05-17 08:08发布

站内问答 / HTML/CSS
1921 4 5

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

enter image description here

4条回答
Animai°情兽
2楼-- · 2019-05-17 08:46

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

class are more usefull than ID in this case.

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
3楼-- · 2019-05-17 08:55 
<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>
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
4楼-- · 2019-05-17 09:00

Since you're not a css guy, just created this example to help you understand what's going on with the div's http://jsfiddle.net/hT9xV/9/

查看更多
0人赞 添加讨论(0) 举报
贼婆χ
5楼-- · 2019-05-17 09:02

You need to float the images right and left.

Here is the CSS:

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

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

floats need explicit widths set

Here is a jsfiddle with it all:

EDIT: updated the jsfiddle to include a surrounding div

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)