Un exemple d'introduction à la méthode de mise en page de l'image de gauche et du texte de droite en utilisant l'attribut table-cell de CSS

Dans certains cas, l'utilisation de table-cell est plus simple et plus efficace que float, comme l'écriture de style des menus horizontaux. Nous examinerons ici l'explication détaillée de la méthode de mise en page d'utilisation de l'attribut table-cell de. CSS pour réaliser l'image de gauche et le texte de droite :

Lors de la disposition horizontale des éléments, float, display:inline-block et d'autres méthodes sont généralement utilisées. Nous pouvons également l'implémenter simplement en utilisant table-cell.
Je pense qu'il y a trois avantages à utiliser table-cell pour créer un arrangement horizontal (hahaha, c'est un peu tiré par les cheveux)

1. et clair : les deux peuvent être utilisés Omis ;
2. Le centrage vertical est également acceptable
3 Même si la bordure et le remplissage sont utilisés, la bordure ne sera pas repoussée ;
clear:both peut être remplacé par display:inline-block La chose la plus importante à propos de display:table-cell est de le centrer verticalement.
De plus, dans le design réactif, le remplissage et la bordure ne feront pas sortir le style de la bordure. Plus besoin de calculer les largeurs et d'utiliser le dimensionnement des boîtes.

Arrangement horizontal réalisé par table-cell
Tout d'abord, introduisons la méthode d'écriture de base de table-cell

A titre d'exemple, nous allons faire un disposition à gauche qui apparaîtra dans les sites Web généraux. Le style du texte à droite de l'image

Partie CSS :

.box{width:60%; margin:60px auto 0; padding:20px; background:#f5f5f5;}   
.content{display:table-cell; *display:inline-block;}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!