Div conteneur de l'image et d'autres divs uns à côté des autres

Je suis en train de dessiner un récipient contenant une image (vignette) sur le côté gauche et un peu de divs à côté de l'image (à la verticale: dans le milieu du conteneur). Ils contiennent des boutons et des listes déroulantes et, éventuellement, quelque chose d'autre, en dehors de la plaine de texte.

Je sais que j'ai besoin d'utiliser float:left et ainsi de suite, mais pas de chance pour moi — n'a pas l'air bien du tout. Donc je ne vais même pas donner un exemple de ce que j'ai réalisé. Au lieu de cela, je vais vous donner ma vision des choses:

Je ne pas voulez une table de solution, seulement vrd — si c'est possible, bien sûr.

Quelqu'un pourrait nous aider avec celui-ci?

Montrez-nous ce que vous avez essayé jusqu'à présent. Nous ne sommes pas ici pour faire votre travail pour vous, nous sommes là pour vous aider avec le code de problème.
Ce n'est pas une vague question, c'était exactement la question que j'avais. Merci pour l'affichage.

InformationsquelleAutor Dmitri | 2012-09-13

8

Utilisation display: inline-block;. En gros, c'est un hybride de inline et block comportement. Voici un exemple, en HTML:
```
<div class = "container">
    <img src = "pic.png" class = "inbl"/>
    <div class = "inbl"></div>
    <div class = "inbl"></div>
</div>
```
CSS:
```
.inbl {
    display: inline-block;
    vertical-align: top;
}
.container {
    white-space: nowrap;
}
```
Et une petite démo: petit lien.
- Donc, Si je comprends bien, avec inline-block avec vous n'avez pas besoin de flotteurs ?
- Yep, vous n'avez pas besoin de flotteurs à tous -- voir la démo si vous le souhaitez.
- J'ai vu la démo, et le résultat est très bon! Je vous remercie beaucoup. Très bon, simple et propre solution.
- Je ne sais pas si vous pouvez lire ceci: Votre solution fonctionne, mais, je voulais savoir, comment pourrais-je utiliser des flotteurs. Je voulais avoir une image vers la gauche, et div2 (voir photo) à droite, et que la DIV être verticalement alignées au milieu. Pourriez-vous m'aider ?
- Avez-vous essayer de changer de vertical-align: top; dans le CSS pour middle?
- Je l'ai fait. En fait, une fois que vous appliquer l'un des flotteurs, vertical-align ne fonctionne plus. Vous pouvez essayer vous-même.
- Oh, eh bien, pourquoi êtes-vous floating en premier lieu? Si votre objectif est de centre le milieu div (div1), il peut être fait sans flottante.
- Pas plus. Mais, en fait, tant pis. J'ai résolu mon problème en utilisant des <table>,<tr>, <td>. Merci en tout cas!
InformationsquelleAutor Chris
3

vous pouvez créer la vue de la table à l'aide de la balise div également. comme cette façon
```
<div style="display:table">
    <div style="display:table-cell">
       <img src="src" style="width:150px;height:100px;/>
    </div>
    <div style="display:table-cell;vertical-align:middle;" align="center">
       <div> your container1 </div>
    </div>
    <div style="display:table-cell;vertical-align:middle" align="center">
        <div> your container2 </div>
    </div>
</div>
```
- quel est le problème dans cette solution?
- Eh bien, pour commencer, ce n'est pas moi qui downvoted votre réponse. Je pense qu'il pourrait avoir à faire avec les éléments suivants: vous avez utilisé des styles en ligne, qui est génériquement non préférable, vous avez utilisé le align attribut, qui est obsolète, et c'est un peu plus complexe que l'utilisation display: inline-block;. Encore une fois, ce n'est pas moi qui downvoted votre réponse, je pense que c'est théoriquement valide.
- Je ne suis pas le blâme sur vous, mais un négatif de l'électeur devrait donner quelques commentaire, donc au moins nous savons ce que le mal dans ma réponse de toute façon j'ai aussi apprendre à partir de ce, fait m rare utilisateur en html et css.
- Merci pour la solution fournie. Je ne sais pas qui downvoted, mais ce n'était pas moi! Je vous remercie une fois de plus!
InformationsquelleAutor Pratik

Vous devez vous connecter pour publier un commentaire.