1
#yyds干货盘点# 前端歌谣的刷题之路-第一百四十七题-三列布局-浮动
source link: https://blog.51cto.com/u_14476028/5823730
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣
使用Grid网格布局实现双列布局的要点在于列数为2，且首列的宽度根据需要自行设置，第二列使用片段"fr"属性进行自适应即可。行数不需要指定，每行会根据内容高度进行自适应缩放。
现在给类名为"container"的盒子添加"display: grid"属性，使该盒子成为容器。再给该容器添加"grid-template-columns: 100px 1fr"属性，表示第一列宽度始终为100px，第二列的宽度为剩余的所有空间。此时可以看到整个容器的高度因为首列的内容被撑开了，并且右边内容区实现了自适应。
进入下一节的学习吧。
编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列布局</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left {
float: left;
width: 100px;
border: 1px solid black;
}
.center {
margin: 0px 100px;
}
.right {
float: right;
width: 100px;
border: 1px solid black;
}
</style>
<body>
<section class="container">
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
<article class="center"></article>
</section>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列布局</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.left {
float: left;
width: 100px;
border: 1px solid black;
}
.center {
margin: 0px 100px;
}
.right {
float: right;
width: 100px;
border: 1px solid black;
}
</style>
<body>
<section class="container">
<article class="left"><br /><br /><br /></article>
<article class="right"><br /><br /><br /></article>
<article class="center"></article>
</section>
</body>
</html>
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK