面试常见考题：三栏布局
image.png
浮动布局
<style>
*{
margin: 0;
padding: 0;
}
.left{
float: left;
width: 300px;
background-color: green;
}
.right{
float: right;
width: 300px;
background-color: red;
}
.left-right-center div{
min-height: 100px;
}
.center{
background-color: yellow;
}
</style>
<body>
<section class="layout">
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈</div>
</article>
</section>
</body>
绝对定位
比较简单 略过
flex布局
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 300px;
background-color: green;
}
.right{
width: 300px;
background-color: red;
}
.left-right-center{
display: flex;
}
.left-right-center div{
min-height: 100px;
}
.center{
flex: 1;
background-color: yellow;
}
</style>
<body>
<section class="layout">
<article class="left-right-center">
<div class="left"></div>
<div class="center">都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈</div>
<div class="right"></div>
</article>
</section>
</body>
table-cell布局
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 300px;
background-color: green;
}
.right{
width: 300px;
background-color: red;
}
.left-right-center div{
display: table-cell;
min-height: 100px;
}
.center{
background-color: yellow;
}
</style>
<body>
<section class="layout">
<article class="left-right-center">
<div class="left"></div>
<div class="center">都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈</div>
<div class="right"></div>
</article>
</section>
</body>
grid布局
<style>
*{
margin: 0;
padding: 0;
}
.layout.grid{
width: 100%;
}
.left-right-center{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.left{
background-color: green;
}
.right{
background-color: red;
}
.center{
background-color: yellow;
}
</style>
<body>
<section class="layout grid">
<article class="left-right-center">
<div class="left"></div>
<div class="center">都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈都是一样的哈哈哈</div>
<div class="right"></div>
</article>
</section>
</body>
网友评论