0 Пользователей и 1 Гость просматривают эту тему.
  • 8 Ответов
  • 9107 Просмотров
*

mebeleko

  • Осваиваюсь на форуме
  • 41
  • 2 / 0
Здравствуйте!

Хотел бы поставить две картинки рядом, используя CSS. Буквально это выглядит так:

[контейнер двух картинок] Картинка 1 слева [отступ в 100 px] Картинка 2

Обе картинки находятся на одной линии.

Как можно проще всего добиться такого результата? Я сделал следующим образом:

Код
#container
{
width: 900px;
margin: 0 auto;
}

#pictureone, #picturetwo
{
width: 200px;
height: 200px;
background-repeat: no-repeat;
}

#pictureone
{
background-image: url('pictureone.png');
}

#picturetwo
{
background-image: url('picturetwo.png');
margin-left: 300px;
margin-top: -240px;
}

Код файла php:

Код
<div id="container">

<div id="blockone"></div>
<div id="blocktwo"></div>

</div>

Можно было как-то еще проще это сделать без отрицательной margin-top? Спасибо.
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Re: Две картинки рядом с помощью CSS
« Ответ #1 : 23.07.2009, 11:51:52 »
Код
<div id="la_la">
 <img ...>
 <img ...>
</div>
<div class="clear"></div>

Код
.clear { clear:both; }
#la_la img { float:left; margin:0px 100px 0px 0px; }
*

Helios

  • Захожу иногда
  • 381
  • 27 / 1
  • Аэтошозадеталь?
Re: Две картинки рядом с помощью CSS
« Ответ #2 : 23.07.2009, 11:53:11 »
Код
#blockone {
float: left;
margin-right: 100px;
}
Киноархив 3.0 для Joomla 3 http://joomlaforum.ru/index.php/topic,46279.msg1463058.html#msg1463058

/* Have a nice day! */
*

mebeleko

  • Осваиваюсь на форуме
  • 41
  • 2 / 0
Re: Две картинки рядом с помощью CSS
« Ответ #3 : 23.07.2009, 12:12:39 »
Код
<div id="la_la">
 <img ...>
 <img ...>
</div>
<div class="clear"></div>

Код
.clear { clear:both; }
#la_la img { float:left; margin:0px 100px 0px 0px; }


Это сразу отменяется, потому что в таком случае картинку можно будет тоскать по всему окну браузера.
« Последнее редактирование: 23.07.2009, 12:31:56 от mebeleko »
*

mebeleko

  • Осваиваюсь на форуме
  • 41
  • 2 / 0
Re: Две картинки рядом с помощью CSS
« Ответ #4 : 23.07.2009, 12:31:47 »
Код
#blockone {
float: left;
margin-right: 100px;
}

Вторая картинка тогда вниз смещается :(
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Re: Две картинки рядом с помощью CSS
« Ответ #5 : 23.07.2009, 12:38:56 »
Цитировать
Это сразу отменяется, потому что в таком случае картинку можно будет тоскать по всему окну браузера.
чего? чем таскать?

Они обе прибьются к левой границе их родительского элемента и между ними будет 100 пикселей промежутка. По тому что я вижу в Вашем коде будет абсолютно аналогично. clear же служит для обнуления наследования плаванья блоков после картинок.

А вообще я не телепат и без картинки угадать желаемое позиционирование блока с картинками (не самих картинок, так как приведенные мной стили делают именно то, что Вы хотели) на странице просто не могу.
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
*

Antosha

  • Захожу иногда
  • 420
  • 52 / 0
  • Плохо спорить плохо
Re: Две картинки рядом с помощью CSS
« Ответ #7 : 23.07.2009, 14:53:42 »
 ;D Злой poizon  ;D

2 mebeleko
Делайте, как Вам говорит poizon
<a href="http://joomlablog.ru/">JoomlaBlog</a>
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
Re: Две картинки рядом с помощью CSS
« Ответ #8 : 23.07.2009, 16:08:30 »
Antohsa, не я добрый. Вон даже пример сделал - не поленился  ;)
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Не работает transition для определенных элементов

Автор Bozhkov2

Ответов: 5
Просмотров: 1189
Последний ответ 12.10.2016, 17:07:41
от Bozhkov2
Как сделать такой заголовок модуля?

Автор Ilhom666

Ответов: 9
Просмотров: 1176
Последний ответ 22.03.2016, 11:55:33
от darkghost
Выставить относительно фона пункты меню ?

Автор warlocksp

Ответов: 6
Просмотров: 812
Последний ответ 01.02.2016, 10:58:26
от warlocksp
Вставка шрифта?

Автор warlocksp

Ответов: 16
Просмотров: 1034
Последний ответ 18.01.2016, 19:04:11
от warlocksp
Удалить маркеры?

Автор warlocksp

Ответов: 4
Просмотров: 800
Последний ответ 09.01.2016, 17:07:35
от warlocksp