CSS: сжать несколько изображений рядом друг с другом

** Редактировать 3: **CSS: сжать несколько изображений рядом друг с другом

Другой пример того, что я пытаюсь для того чтобы достигнуть:

+--------------------+ 
|     | 
| +--++--++--++--+ | 
| |1 ||2 ||3 ||4 | | 
| | || |+--+| | | 
| +--+| |+--+| | | 
| +--+| ||7 |+--+ | 
| |5 |+--+| |+--+ | 
| | |+--+| ||8 | | 
| | ||6 || |+--+ | 
| +--+| |+--+  | 
|  +--+   | 
|     | 
+--------------------+

Код:

<body> 8x <img /> </body>

CSS:

Здравствуйте,

У меня есть 3 изображения в HTML-страницу, которая показывает, как это: (в основном, в коде, это просто три <img /> подряд)

+------------------+ 
|     | 
| +---++-------+ | 
| |1 ||2  | | 
| | ||  | | 
| +---+|  | | 
|  |  | | 
|  +-------+ | 
| +--+   | 
| |3 |   | 
| | |   | 
| +--+   | 
|     | 
+------------------+

Но я хотел бы, чтобы показать без вертикального зазора между вторым и третьим, например:

+------------------+ 
|     | 
| +---++-------+ | 
| |1 ||2  | | 
| | ||  | | 
| +---+|  | | 
| +--+ |  | | 
| |3 | +-------+ | 
| | |   | 
| +--+   | 
|     | 
|     | 
|     | 
+------------------+

Как сделать заказ? Можно ли так сделать этот CSS?

Edit:

Другими словами, я хочу, чтобы третье изображение, чтобы прикоснуться к 1-ый, так как очевидно, некоторое пространство осталось. Но так как экран недостаточно велик, третий «переплачивает» (это правильное слово?) На следующую строку, которая поддерживает высоту самого высокого элемента из строки выше. И я не хочу, чтобы сохранить высоту, я хочу, чтобы соответствовать близко друг к другу ..

Edit 2:

код:

<html><body> 
<img /><img /><img /> 
</body><html>

Это действительно только несколько изображений в строка ......

источник

2010-07-30 Theo Heikonnen

Да, попробуйте это, установите изображения 1 и 3, чтобы поплавать влево, а изображение 2 - вправо. Я помогу вам больше, если это не сработает. – jnkrois

Проблема в том, что в общем случае может быть больше изображений, чем 3, поэтому я действительно не знаю, какой из них будет плавать влево или вправо ... –

Значит, вы не знаете до времени выполнения, сколько изображений есть и какие размеры находятся? Если да, то что должно произойти с четвертым изображением? Что, если изображение 3 шире изображения 1? – joelt

Поместите изображения 1 и 3 сначала в свой HTML и добавьте к ним атрибут align = "left".

В качестве альтернативы вы можете использовать положение CSS: абсолютное и установить явные координаты X, Y для каждого из них.

источник

2010-07-30 16:13:16 elmonty

Wow. Я не видел 'align =" left "', так как, например, 2001 –

На самом деле, было бы проще, если бы вы могли бы показать код ... но вы можете поместить изображения, как этот

.image1{ 
    position:fixed; 
    right:20px; 
    top:50px; 
} 

.image2{ 
    position:fixed; 
    right:100px; 
    top:50px; 
}

и экспериментировать с позиции, которую вы хотите acually соответственно размер ваших изображений ...

или вы могли бы представить их в качестве фоновых изображений, как, что:

.something { 
    background-image:url(yourpath.jpg); 
    position:fixed; 
    top:711px; 
     left:10px; 
    display:block; 
    height:100px; 
    width:269px; 
}

фиксированная позиция не всегда лучший путь, но он может работать в ваш случай ...

попробуйте изображения для googling css, и вы можете найти много вещей ... также это хороший ресурс: http://www.opera.com/company/education/curriculum/

и это очень полезно CSS CookBook http://www.amazon.com/CSS-Anthology-Essential-Tricks-Hacks/dp/0980576806

удачи

источник

2010-07-30 16:28:44 rabidmachine9

'position: absolute;', вероятно, будет менее запутанным, чем 'position: fixed;'. – strager

Если вы знаете изображения впереди времени, то я не понимаю, почему вам нужно общее решение. jnkrois дал хороший ответ для конкретного случая.

Если вы хотите общее решение, я бы поставил их абсолютно и использовал javascript для расчета местоположения во время выполнения. По сути, вы ищете алгоритм упаковки, который вы можете найти в разных местах.

источник

2010-07-30 17:43:20 joelt

Даже если я знаю изображения раньше времени, я не знаю ширины браузера, чтобы они могли перепланировать. Да, я могу проверить изменение размера браузера в javascript, а затем упаковать изображения, но это немного невероятно, что это невозможно сделать чистым CSS. –

Вы должны попробовать плагин masonry jQuery. Взгляните на страницу плагина, где вы увидите пример того, чего вы хотите достичь: http://desandro.com/resources/jquery-masonry/

источник

2010-09-04 16:50:38 Andrei

CSS: сжать несколько изображений рядом друг с другом

ответ

Смежные вопросы