CSS: presser plusieurs images rapprochées

** Edit 3: **CSS: presser plusieurs images rapprochées

Un autre exemple de ce que j'essaie de achive:

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

code:

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

CSS:

Bonjour,

J'ai 3 images dans une page HTML qui affiche comme ceci: (essentiellement, dans le code, il est juste trois <img /> de suite)

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

Mais je voudrais pour montrer sans l'écart vertical entre le 2e et le 3e, comme:

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

Comment? Est-il en quelque sorte possible de faire ce CSS?

Edit:

En d'autres termes, je veux la 3ème image pour toucher la 1ère, car il y a bien un peu de place. Mais si l'écran n'est pas assez grand, le 3ème "refait" (est-ce le bon mot?) À la ligne suivante qui maintient la hauteur de l'élément le plus haut de la ligne ci-dessus. Et je ne veux pas de maintenir la hauteur, je veux pour l'adapter étroitement ..

Edit 2:

Code:

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

Il est vraiment juste quelques images une ligne ......

Source

2010-07-30 Theo Heikonnen

Oui, essayez ceci, réglez les images 1 et 3 pour flotter à gauche, et l'image 2 pour flotter à droite. Je vais vous aider plus si cela ne fonctionne pas. – jnkrois

Le problème est, en général, il peut y avoir plus d'images que 3 donc je ne sais pas lequel flotter à gauche ou à droite ... –

Donc, vous ne savez pas jusqu'à l'exécution combien d'images il y a, et quelles sont les tailles sont? Si oui, que devrait-il arriver à la quatrième image? Que faire si l'image 3 est plus large que l'image 1? – joelt

Placez les images 1 et 3 en premier dans votre code HTML et ajoutez l'attribut align = "left".

Vous pouvez également utiliser la position CSS: absolute et définir des coordonnées X, Y explicites pour chacune d'entre elles.

Source

2010-07-30 16:13:16 elmonty

Wow. Je n'ai pas vu 'align =" left "' puisque comme 2001 –

En fait, il serait plus facile si vous pouvez montrer un peu de code ... mais vous pouvez placer des images comme ça

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

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

et expérimenter avec la position que vous voulez acually en conséquence à la taille de vos images ...

ou vous pouvez les présenter sous forme d'images de fond comme ça:

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

position fixe n'est pas toujours la meilleure façon d'aller, mais il peut travailler dans votre cas ...

essayez googling images css et vous pouvez trouver beaucoup de choses ... aussi c'est une bonne ressource: http://www.opera.com/company/education/curriculum/

ce qui est un livre de cuisine css vraiment utile http://www.amazon.com/CSS-Anthology-Essential-Tricks-Hacks/dp/0980576806

bonne chance

Source

2010-07-30 16:28:44 rabidmachine9

'position: absolute;' sera probablement moins déroutant que 'position: fixed;'. – strager

Si vous connaissez les images à l'avance, alors je ne me comprends pas pourquoi vous avez besoin une solution générale. jnkrois a donné une bonne réponse pour un cas spécifique.

Si vous voulez une solution générale, je les positionnerais tous en absolu, et utiliserais javascript pour calculer l'emplacement à l'exécution. Essentiellement, alors vous cherchez un algorithme d'emballage, que vous pourriez trouver dans une variété d'endroits.

Source

2010-07-30 17:43:20 joelt

Même si je connais les images à l'avance, je ne connais pas la largeur du navigateur, donc ils pourraient refaire. Oui, je pourrais vérifier le redimensionnement du navigateur en javascript et ensuite emballer les images, mais il se sent un peu incroyable qu'il ne peut pas être fait en pur CSS. –

Vous devriez essayer le plugin jQuery Masonry. Jetez un oeil sur la page plugin vous devriez voir un exemple de ce que vous voulez réaliser: http://desandro.com/resources/jquery-masonry/

Source

2010-09-04 16:50:38 Andrei

CSS: presser plusieurs images rapprochées

Répondre

Questions connexes