Alignez verticalement flottant divs

Question

Je suis en train de flotter deux divs avec différentes polices. Je ne peux pas trouver un moyen d'aligner le texte sur la même ligne de base. Voici ce que j'ai essayé:

<div id="header">
    <div id="left" style="float:left; font-size:40px;">BIG</div>
    <div id="right" style="float:right;">SMALL</div>
</div>

Answer 1

Ok, tout d'abord le pur CSS. Vous pouvez obtenir un alignement vertical vers le bas à l'aide relative+positionnement absolu comme ceci:

<div id="header">
  <div id="left">BIG</div>
  <div id="right">SMALL</div>
</div>
<style type="text/css">
html, body { margin: 0; padding: 0; }
#header { position: relative; height: 60px; }
#left { font-size: 40px; position: absolute; left: 0; bottom: 0; }
#right { position: absolute; right: 0; bottom: 0; }
</style>

Vous pouvez avoir des problèmes avec cela, comme IE6 comportement ainsi que le z-index problèmes avec des choses comme les menus (dernière fois que j'ai essayé mes menus est apparu en vertu de la teneur absolue).

Aussi, selon que tous les éléments doivent être en position absolue ou non, vous devrez peut-être commencer à faire des choses comme la spécification de la hauteur de l'élément contenant explicitement, ce qui est généralement indésirable. Idéalement, vous voulez le conteneur automatique de la taille de ses enfants.

Le problème est que les lignes de base de la taille des polices de caractères ne correspondent pas et je ne sais pas d'une "pure" CSS façon de le faire.

Avec des tables toutefois, la solution est triviale:

<table id="header">
<tr>
  <td id="left">BIG</td>
  <td id="right">SMALL</td>
</tr>
</table>
<style type="text/css">
#header { width: 100%; }
#header td { vertical-align: baseline; }
#left { font-size: 40px; }
#right { text-align: right; }
</style>

Essayez-la et vous verrez qu'il fonctionne parfaitement.

L'anti-table foule crier bleu de meurtre, mais le dessus est le plus simple navigateur compatible (surtout si IE6 soutien est nécessaire) de le faire.

Oh, et toujours préfèrent utiliser des classes CSS styles.

Answer 2

edit viens de re-lire les questions et a vu une boîte besoins flottant à droite... donc ci-dessous ne fonctionne pas... mais peut-être adaptable

Tout d'abord, vous devriez être en utilisant les travées plutôt que de divs que le contenu va être en ligne pour en finir avec. Je ne connais pas les tenants et les aboutissants de pourquoi, mais cela signifie que les éléments se comportent un peu plus conviviale dans les navigateurs.

Une fois que vous l'avez fait, cela fonctionne un régal, même dans ie6 et 7:

#header {height:40px;line-height:40px;}
#left, #right {display:-moz-inline-stack;display:inline-block;vertical-align:baseline;width:auto;} /*double display property is fora  fix for ffx2 */
#left {font-size:30px;}
#right{font-size:20px;}

<div id="header">
  <span id="left">BIG</span>
  <span id="right">SMALL</span>
</div>

Answer 3

Vous pouvez faire cela en utilisant la hauteur de la ligne, mais il ne fonctionne que sur des éléments en ligne et si le texte ne boucle pas.

<div id="header" style="overflow:hidden;">
    <span id="left" style="font-size:40px;">BIG</span>
    <span id="right" style="line-height:48px;">SMALL</span>
</div>

J'ai changé l' div de span. Si vous souhaitez conserver div seulement ajouter de la display:inline de votre style.

<div id="header" style="overflow:hidden;">
    <div id="left" style="font-size:40px;display:inline;">BIG</div>
    <div id="right" style="line-height:48px;display:inline;">SMALL</div>
</div>

Answer 4

Entendez-vous de référence dans le sens typographique? (Qui est, chaque ligne de texte est de niveau avec la ligne correspondante dans la colonne autre) Si c'est le cas, la taille de la police doivent être accolés les uns des autres, par exemple, 12 et 18px (de 1:1,5).

Si vous voulez dire que les divs doivent être à la même hauteur, il n'y a pas un moyen facile de le faire. Vous pouvez définir manuellement une hauteur (height:100px;), ou de l'utilisation de javascript pour régler l'un que l'autre change.

Ou, vous pouvez le faux la même hauteur, en enfermant les deux divs dans un récipient, puis en appliquant un style d'arrière-plan du conteneur qui imite l'aspect des colonnes, la valeur de répéter verticalement. De cette façon, vous obtenez faux colonnes. Pour un regard en profondeur, voir ce classique de Une Liste Outre l'article.

Vouliez-vous dire, vous avez deux morceaux de texte, et les deux doivent être à la base des colonnes? (désolé, ne peut pas poster une image encore)

Une façon vous pouvez faire est d'employer le Faux Colonnes de la méthode ci-dessus.

L'autre façon est de mettre en place le texte dans son propre récipient à l'intérieur du texte. Ensuite, la position à la fois absolument au bas des colonnes ... voici un long extrait:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title></title>
    	<style type="text/css" media="screen">

    	.col { width:200px; float:left;  }
    	.short { height:200px; background:#eee; margin-bottom:20px; }
    	.long { background:#ddd; margin-bottom:100px; /* margin equal to height of #big */  }

    	#container { overflow:hidden; width:400px; margin:0px auto; position:relative; border:1px solid green;}


    	#big, #small { position:absolute; bottom:0px; width:200px; }
    	#big { height:100px; background:red; }
    	#small { height:20px; background:green; right:0px; }



    	</style>
    </head>
    <body>

    <div id="container">
    	<div class="col long">
    		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.
    	</div>

    	<div class="col short">
    		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    	</div>

    	<div id="big" >BIG</div>

    	<div id="small">small</div>

    </div>
    </body>
</html>

Answer 5

Si vous mettez le droit div flottant avant gauche div flottant dans le HTML, et ils vont les aligner verticalement.

Alternativement, vous pouvez flotter les deux divs gauche qui est parfaitement valide, et comment la plupart des CSS dessins sont codés.