Maison > Article > interface Web > Disposition CSS à deux colonnes basée sur les règles BFC (exemple de code)
Disposition CSS à deux colonnes basée sur les règles BFC (exemple de code)
- 不言avant
- 2019-04-03 11:35:382838parcourir
Ce que cet article vous apporte concerne la disposition CSS à deux colonnes (exemple de code) basée sur les règles BFC. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Il existe de nombreuses façons d’implémenter une mise en page adaptative commune à deux colonnes en CSS.
Ce dont nous parlons ici, c'est qu'un nouveau BFC se formera lorsque le débordement n'est pas visible. Quant à ce qu’est BFC, vous pouvez d’abord le rechercher, c’est essentiellement couvert. Quand j'aurai plus de temps libre, je parlerai de BFC et d'exemples. Voilà, entrez le code :
<!-- 利用BFC的overflow hidden实现两列布局-->
<!DOCTYPE html>
<html>
<head>
<title>利用BFC规则实现两栏布局</title>
<meta charset="utf8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.contain {
width: 100%;
height: 100%;
background: grey;
color: #fff;
}
.contain .left {
float: left;
/*margin-right: 20px;*/
width: 200px;
height: 100%;
word-wrap: break-word; /* 用于纯数字和英文时能够超出时自动换行*/
background: blue
}
.contain .right {
height: 100%;
overflow: hidden; /* 让right成为一个BFC*/
word-wrap: break-word; /* 用于纯数字和英文时能够超出时自动换行*/
background: darkblue;
}
</style>
</head>
<body>
<!-- CSS2.1规范中已经明确提出，设置overflow属性（非visible）能触发块级格式化上下文(Block Formatting Conext, BFC)。 -->
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quis error ea veniam animi quibusdam, nobis repudiandae consectetur sed? Minus architecto cumque perspiciatis saepe rerum non dolorum voluptates similique, consequuntur.</div>
<div>right这里的overflow:hidden不是本来的意思（超出容器内容截取掉不显示），而是利用了BFC规则（overflow不为visible时会创建出一个BFC）</div>
</div>
</body>
</html>
Faites attention à la ligne la plus longue du code (ligne 37). Le texte ici n'est pas en anglais, mais en latin. ce n’était pas tellement ma main. Permettez-moi de partager avec vous, pendant les tests, si vous souhaitez saisir quelque chose mais que vous ne savez pas quoi saisir et que cela a l'air moche, vous pouvez être paresseux. Entrez lorem et appuyez sur la touche de tabulation À l'exception de la première phrase, qui est corrigée, les phrases suivantes sont générées aléatoirement. Le principe est que votre éditeur est équipé du plug-in emmit. Hbuilder et vscode sont intégrés et disponibles directement. Le texte de soumission nécessite l'installation du plug-in. Le Bloc-notes ne fonctionnera certainement pas. Je les ai personnellement testés. C'est un peu amusant ! Les autres commentaires sont presque écrits. Le code est à l'origine très simple, mais pour ces choses, CSS nécessite plus d'expérience pratique pour essayer de l'implémenter. C'est tout pour l'essai de cette fois. La qualité n'est peut-être pas très bonne quand je suis occupé, mais maintenant je commence à m'en tenir à l'écriture de quelque chose.
De plus, le côté gauche est fixe et le côté droit est adaptatif. Je pense que vous pouvez facilement gérer le côté droit fixe et le côté gauche adaptatif. Ce sont toutes des questions triviales, je vous le rappellerai si j'y pense. Cette adaptation à deux colonnes ne signifie pas que les deux colonnes sont adaptatives.
[Recommandations associées : Tutoriel vidéo CSS]
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!