Heim >Web-Frontend >CSS-Tutorial >Zweispaltiges CSS-Layout basierend auf BFC-Regeln (Codebeispiel)
Zweispaltiges CSS-Layout basierend auf BFC-Regeln (Codebeispiel)
- 不言nach vorne
- 2019-04-03 11:35:382856Durchsuche
In diesem Artikel geht es um das zweispaltige CSS-Layout (Codebeispiel), das auf BFC-Regeln basiert. Ich hoffe, dass es für Sie hilfreich ist.
Es gibt viele Möglichkeiten, ein gemeinsames adaptives zweispaltiges Layout in CSS zu implementieren.
Worum es hier geht, ist die Implementierung durch Bildung eines neuen BFC, wenn der Überlauf nicht auf sichtbar gesetzt ist. Was BFC ist, können Sie zuerst durchsuchen, es ist im Grunde abgedeckt. Wenn ich mehr Freizeit habe, werde ich über BFC und Beispiele sprechen. Das war's, geben Sie den Code ein:
<!-- 利用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>
Achten Sie auf die längste Zeile im Code (Zeile 37). Der Text ist hier nicht auf Englisch, sondern natürlich auf Latein Ich habe nicht so viel von Hand getippt. Lassen Sie mich Ihnen sagen, dass Sie beim Testen faul sein können, wenn Sie etwas eingeben möchten, aber nicht wissen, was Sie eingeben sollen, und es hässlich aussieht. Geben Sie lorem ein und drücken Sie die Tabulatortaste. Mit Ausnahme des ersten Satzes, der festgelegt ist, werden die folgenden Sätze zufällig generiert. Voraussetzung ist, dass Ihr Editor mit dem Emmit-Plug-In ausgestattet ist und vscode direkt verfügbar ist. Das Plug-In muss installiert sein. Notepad wird definitiv nicht funktionieren. Ich habe diese persönlich getestet. Es macht ein bisschen Spaß! Die anderen Kommentare sind fast fertig. Der Code ist ursprünglich sehr einfach, aber für diese Dinge erfordert CSS mehr praktische Erfahrung, um ihn zu implementieren. Das war's für den Aufsatz dieses Mal. Die Qualität ist vielleicht nicht sehr gut, wenn ich beschäftigt bin, aber jetzt fange ich an, mich daran zu halten, etwas zu schreiben.
Außerdem ist die linke Seite fest und die rechte Seite adaptiv. Ich glaube, dass Sie mit der festen rechten Seite und der adaptiven linken Seite problemlos umgehen können. Ich werde Sie daran erinnern, wenn ich darüber nachdenke. Diese zweispaltige Anpassung bedeutet nicht, dass beide Spalten adaptiv sind.
[Verwandte Empfehlungen: CSS-Video-Tutorial]
Das obige ist der detaillierte Inhalt vonZweispaltiges CSS-Layout basierend auf BFC-Regeln (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!