Как разместить два изображения в противоположных углах одного деления - PullRequest
Новая
       3

Как разместить два изображения в противоположных углах одного деления

3 голосов
/ 17 мая 2011

Я не CSS-парень, как вы можете видеть, и мне не нужна помощь в создании этого div с двумя изображениями, как показано на рисунке ниже

enter image description here

Ответы [ 4 ]

2 голосов
/ 17 мая 2011

Томас прав, но есть даже лучшее решение: 

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

2 голосов
/ 17 мая 2011 
<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>
1 голос
/ 17 мая 2011

Вам нужно float изображения вправо и влево.

Вот CSS: 

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

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

floats нужно установить явную ширину

Вотjsfiddle со всем этим:

EDIT: обновлен jsfiddle, чтобы включить окружающий div

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

0 голосов
/ 18 мая 2011

Поскольку вы не работаете в CSS, просто создали этот пример, чтобы помочь вам понять, что происходит с div's http://jsfiddle.net/hT9xV/9/

...