comment obtenir le texte de 2 div pour aligner le long du fond?

Je suis en train de concevoir une page de contact et je voudrais avoir 2 colonnes, une avec une étiquette (par exemple facebook, twitter) et une avec les détails réels. La chose est que je veux les deux lignes (qui ont du texte de taille différente) à la fois aligner le long du bord inférieur.comment obtenir le texte de 2 div pour aligner le long du fond?

Il est probablement plus facile si je vous montre: http://goonbee.com/contact

Actuellement, l'étiquette et les détails sont alignés verticalement le long du centre. Comment puis-je les faire aligner le long du fond?

Mon CSS est:

#contactbox { 
    display: block; 
    margin-top: 25px; 
} 

#contactboxlabels { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 17px; 
    color: #c9c9c9; 
    line-height: 42px; 
    text-align: right; 
    float: left; 
    padding: 0; 
    margin: 0; 
} 

#contactboxdetails { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 35px; 
    color: #545454; 
    line-height: 42px; 
    text-align: left; 
    vertical-align: bottom; 
    float: left; 
    padding: 0; 
    margin: 0; 
    margin-left: 15px; 
}

Mon HTML:

<div id="contactbox"> 
    <div id="contactboxlabels"> 
     <span>email<br />twitter<br />facebook<br />phone</span> 
    </div> 

    <div id="contactboxdetails"> 
     <span><a href="mailto:[email protected]">[email protected]</a><br /><a href="http://twitter.com/goonbee">@goonbee</a><br /><a href="http://facebook.com/goonbee">facebook.com/goonbee</a><br /><a href="tel:+44000000">+44 000000</a></span> 
    </div> 

    <div style="clear:both"></div> 
</div>

Source

2010-10-04 lms

Tout d'abord, votre balisage est pas très sémantique. Les clés appartiennent à leurs valeurs, elles ne sont pas une colonne indépendante. Ce serait le balisage plus sémantique, un minimum:

<dl> 
    <dt>email</dt> <dd>[email protected]</dd> 
    <dt>twitter</dt> <dd>@goonbee</dd> 
    <dt>facebook</dt> <dd>facebook.com/goonbee</dd> 
    <dt>phone</dt> <dd>+44 7825 163256</dd> 
</dl>

pour le style de cela, le seul inconvénient est que vous devez définir la largeur de votre dt « colonne » explicitement afin de les amener à aligner:

dl { font-family: Arial, Helvetica, sans-serif; } 

/* column layout */ 
dt { 
    float: left; 
    clear: left; 
    width: 4.25em; /* needs to be set for longest item */ 
    margin: 0 1em 0 0; 
} 

dd { 
    overflow: hidden; /* creates an implicit column from remaining space */ 
}

Vous pouvez ensuite régler line-height sur le dt et ajouter padding-top pour garder les hauteurs identiques et faire correspondre les lignes de base:

/* typography */ 
dt { 
    font-size: 17px; 
    line-height: 29px; /* 42 - padding-top */ 
    padding-top: 13px; /* ceil((42 - font-size)/2) */ 
    color: #c9c9c9; 
    text-align: right; 
} 

dd { 
    font-size: 35px; 
    line-height: 42px; 
    color: #545454; 
    text-align: left; 
}

Si vous ne souhaitez pas définir la largeur de la colonne de gauche et l'aligner en fonction de l'élément le plus long, comme une colonne de table, utilisez une table! Cela vous donnerait également un meilleur contrôle sur le vertical-align. Je ne pense pas qu'un tableau soit inapproprié ici, surtout si vous marquez la colonne de gauche en tant que th en-têtes.

Source

2010-10-04 07:09:28

Je ne suis pas sûr qu'une liste de définition soit le balisage le plus «sémantique» ici - vous ne définissez pas vraiment ce qu'est un Facebook ou un Twitter, n'est-ce pas? Ceci est une série d'appariements entre en-tête et valeur, et que, folks, est une table. Assez curieusement, les tables permettent l'alignement du fond dans les cellules. Il est peut-être à la hauteur du mal d'utiliser arbitrairement les tableaux pour la mise en page, mais il est tout aussi dangereux d'éviter les tableaux lorsqu'ils représentent le mieux la structure de données que vous essayez de représenter. –

J'ai tendance à être d'accord avec le fait que j'irais probablement avec une table ici aussi, mais le modèle de valeur de rubrique _is_ pour quoi les listes de définitions sont destinées. Oui, vous définissez la valeur de recherche pour Facebook, Twitter, etc. Je ne dirais pas que c'est faux; c'est aussi sémantique.(De plus, plusieurs éléments 'dd' tels que des adresses email supplémentaires sous un' dt' seraient également légaux: ce n'est pas le cas avec une table, où vous devez soit ajouter une colonne pour la deuxième valeur, soit une liste dans la cellule pour le garder "sémantique".) –

au moment où vous avez les étiquettes dans un conteneur et les valeurs dans un autre. cela rendra le travail plus difficile et n'est pas non plus sémantique et significatif.

placez chaque étiquette et chaque valeur dans son propre conteneur. vous vous retrouverez avec 4 paires d'étiquette/valeur.

donnez le conteneur position:relative; puis utilisez position:absolute; pour l'étiquette et la valeur. tant que le fond des deux est 0, ils doivent tous les deux être alignés le long du bord inférieur.

Source

2010-10-04 05:09:23

<div> 
    <div style="float: left; width: 75px; text-align: right; padding-right: 10px; padding-top:15px;">email</div> 
    <div><a href="mailto:[email protected]">[email protected]</a></div> 
</div>

ou ...

<div> 
    <span style="vertical-align: bottom; padding-right: 10px;">email</span> 
    <a href="mailto:[email protected]">[email protected]</a> 
</div>

Source

2010-10-04 05:16:24 sdavids

comment obtenir le texte de 2 div pour aligner le long du fond?

Répondre

Questions connexes