CSS: сжать несколько изображений близко друг к другу - PullRequest
Новая
       2

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

2 голосов
/ 30 июля 2010

** Редактировать 3: **

Еще один пример того, чего я пытаюсь достичь: 

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

Код: 

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

CSS: 

?

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

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

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

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

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

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

Edit:

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

Редактировать 2:

код: 

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

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

Ответы [ 4 ]

1 голос
/ 04 сентября 2010

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

0 голосов
/ 30 июля 2010

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

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

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

и экспериментировать с положением, которое вы на самом деле хотите, в соответствии с размером ваших изображений ...

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

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

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

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

, и это действительно полезная кулинарная книга css http://www.amazon.com/CSS-Anthology-Essential-Tricks-Hacks/dp/0980576806

удачи

0 голосов
/ 30 июля 2010

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

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

0 голосов
/ 30 июля 2010

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...