Explication détaillée de l'utilisation de direction:rtl dans la mise en page sur le Web

Peut-être parce que la plupart des langues​​dans le monde se lisent de gauche à droite, il n'y a pas beaucoup d'informations sur la direction :rtl. Le comportement spécifique de l'écriture de texte de droite à gauche est défini en Unicode, mais ce n'est pas ce que nous voulons considérer. Ce dont nous avons besoin, c'est d'utiliser les caractéristiques pertinentes de l'impact de l'écriture de droite à gauche sur les boîtes au niveau des blocs pour créer des mises en page de base.
Pour déplacer le contenu vers la droite, nous utilisons généralement text-align:right, mais cela ne fait qu'aligner le contenu à droite, c'est-à-dire pousser les éléments vers la droite. Parfois, nous avons besoin d'organiser le contenu vers la droite un par un, c'est pourquoi flat:right est utilisé. Mais float:right a aussi ses problèmes. Float lui-même entraînera l'épuisement du contenu du flux, provoquant l'effondrement du conteneur. Cela nécessite à son tour d’autres mesures pour corriger.
L'utilisation de direction:rtl peut obtenir un effet de type flottant sans autres effets secondaires, mais le principe est que les éléments enfants doivent être des éléments de niveau bloc. Les éléments de niveau en ligne peuvent avoir des résultats inattendus dans RTL, car RTL effectuera un traitement spécial sur certains caractères en fonction des attributs de caractère dans Unicode. La méthode de traitement spécifique est très compliquée et ne sera pas mentionnée dans cet article. En bref, si ce rtl est uniquement destiné à la mise en page, n'utilisez pas d'éléments de niveau en ligne dans les éléments enfants.

<style>
body {font:14px/18px Consolas;}
div {
  width:100px;padding:10px;
  margin:10px 0px 30px 0px;
  border:1px solid #CCC;
}
.float {overflow:hidden;} /*加overflow防止容器坍缩*/
.float span {float:right;}
.align {text-align:right;}
.align span {text-align:left;}
.direction {direction:rtl;}
.direction span {direction:ltr;display:inline-block;}
</style>
float right
<div class="float">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>
align right
<div class="align">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>
direction rtl
<div class="direction">
  <span>次</span><span>碳</span><span>酸</span><span>钴</span>
</div>

En fait, le style de direction est un sujet très profond, nous utilisons ici simplement une de ses propriétés de base pour la mise en page. D'autres propriétés doivent commencer par les attributs de caractère Unicode, et il existe également un style Unicode-bidi associé. Si vous ne travaillez pas sur des projets en arabe ou en chinois ancien, vous ne l’utiliserez pratiquement pas, donc généralement vous n’avez pas besoin de l’étudier en profondeur, il suffit de le comprendre.

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!