2017-10-04 9 views
0

J'ai du mal à aligner trois divs côte à côte. J'ai réussi à le faire fonctionner dans Chrome, mais dès que j'ai testé d'autres navigateurs, tout est allé en enfer. J'ai besoin de la première div pour occuper 100% de l'espace disponible, la seconde div a une largeur statique (160px), et la troisième div doit être largeur: auto, en fonction de la taille du contenu à l'intérieur (Mais techniquement je peux faites-le fonctionner avec une largeur statique aussi bien).Aligner trois divs côte à côte sans flexbox

C'est ce que j'ai essayé:

.row { 
    display: table; 
} 

.col { 
    display: table-cell; 
} 

Vous pouvez voir tout le code ici: https://codepen.io/anon/pen/RLjGab

Comme vous le voyez, cela fonctionne sans problème nay dans Chrome, mais dans d'autres navigateurs dès que J'ai mis n'importe quel contenu dans le col la hauteur de la rangée est plus grande que définie, et j'ai vraiment du mal à trouver pourquoi. J'ai aussi besoin de ça pour travailler dans IE9, donc la flexbox est un jeu d'enfant, mais ce serait génial si quelqu'un pouvait au moins me montrer la direction correcte de la façon dont cela pourrait être accompli.

Merci à l'avance

Répondre

0

I figured it out, je voulais juste ajouter à vertical-align: middle; il colonne, et que le fixe.