float fluid l'image à gauche avec habillage du texte

Il n'y a pas de raison de ce qui devrait être difficile à atteindre. De retour dans la voie de la journée, vous pouvez simplement créer un tableau et de mettre l'image sur la première cellule et le texte sur le deuxième. Facile comme bonjour.

Pour une raison que je vais avoir un enfer d'un moment se présente au travail avec des css, et je sais css assez couramment. Je suis sûr que je suis juste donnant sur un espoir de réponse facile.

Ce que je cherche à atteindre:

  • Dynamique de taille moyenne (tiré à partir de la base de données) de l'image flottait à la gauche de la Description du texte à droite avec habillage de l'image ci-dessous lorsqu'il atteint la hauteur de l'image.

Ce qui ne fonctionne pas:

  • Réglage de la marge gauche du texte (largeur de l'image n'est pas conforme)
  • Réglage de largeur /flottant à droite sur texte (encore une fois, la largeur de l'image est dynamique afin de largeur appropriée sur le texte devrait être inconnu)

Exemple de Code (pré css):

<div class="demo">
    <img src="dynamic_sized_image.jpg" />
    <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>

Heureusement qu'il y a une réponse!!

Merci!

OriginalL'auteur rkingon | 2011-09-21

  1. 49

    Voici la solution pour votre problème ( p { overflow: hidden} )

    http://jsfiddle.net/simoncereska/BnQRW/

    Holy Moly je ne peux pas croire que c'est facile... je savais qu'il me manquait quelque chose. Merci SOOO beaucoup.. je souhaite que je pourrais Voter, mais j'ai besoin de plus de points de rep =/
    Salut alors euh, vous demandez-vous, par hasard, si vous pouviez expliquer POURQUOI cela fonctionne? Il n'a pas vraiment de sens.. heh
    Cela fonctionne, mais il ne permet pas de texte à la verticale centrée sur l'image, ou l'image à la verticale centrée sur le texte (selon ce qui est plus haut). C'est une véritable honte que le seul moyen fiable à la verticale du centre de choses, c'est à l'aide de tableaux.
    href="http://www.colinaarts.com/articles/the-magic-of-overflow-hidden/" >colinaarts.com/articles/the-magic-of-overflow-hidden semble l'expliquer

    OriginalL'auteur simoncereska

  2. 0

    Je ne pense pas que ce soit possible avec de la pure css parce que vous avez un attribut qui est dynamique.

    Utiliser javascript pour calculer l'img width, alors vous pouvez trouver la largeur du texte (à condition que le #démo conteneur est une taille fixe). Définir les largeurs via js et utiliser ce css: http://jsfiddle.net/GcV3S/

    overflow:hidden est la réponse! Je ne peux pas croire que ça a marché...
    afin de marquer comme réponse correcte 😉

    OriginalL'auteur marissajmc

  3. 0

    La plus simple et la meilleure façon est juste pour définir une taille d'image fixe. Juste à l'échelle de ceux-ci, ce sera dans la plupart des cas d'améliorer la mise en page et l'apparence de votre site web. Si vous avez vraiment besoin d'avoir ceci sans définir une largeur fixe pour le texte-bloc ou de l'image-bloc je ne sais pas vraiment une réponse, en ce moment, désolé.

    La seule façon que je peux penser de la droite maintenant est d'utiliser javascript pour modifier la largeur du texte... n'en est pas moins une question intéressante.

    Je me demandais à l'aide de java, ou même de les stocker largeur de l'image en cms, puis fournir css... cependant, il apparaît qu'il y a un chemin... overflow:hidden; sur le texte. il a travaillé!

    OriginalL'auteur JNDPNT