css常見佈局之三列布局--雙飛翼佈局和聖盃佈局

時間 2019-11-17

標籤 css 常見佈局之三雙飛欄目 CSS 简体版

原文原文鏈接

首先二者都是兩邊寬度固定，中間寬度自適應，而且中間盒子(主題內容)放在最前面，以便優先渲染。html

實現方案：都使用浮動來實現。佈局

聖盃佈局實現以下：flex

<!DOCTYPE html>

<head>

<style>

.box{

padding: 0 100px;

height: 400px;

}

.center,

.left,

.right{

float: left;

height: 100%;

}

.left,

.right{

position: relative;

}

.center{

width: 100%;

background: #333;

}

.left{

width: 100px;

background: #f8f8f8;

margin-left: -100%; /*爲了使元素移到上一行，margin-left設置百分比是相對於父元素寬度的，這個寬度是不包括padding在內*/

left: -100px;

}

.right{

width: 100px;

background: #ccc;

margin-left: -100px;

right: -100px;

}

</style>

</head>

<body>

</div>

</body>

</html>

flex實現聖盃佈局：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

html,

body {

height: 100%;

overflow: hidden;

display: flex;

/* 改變主軸的排列方式 */

flex-direction: column;

justify-content: space-between;

text-align: center;

font-size: 25px;

}

.footer,

.header {

height: 88px;

background: #c33;

text-align: center;

line-height: 88px;

font-size: 30px;

}

.center {

flex: 1;

background: #ccc;

display: flex;

}

.center>.left,.center>.right {

width: 200px;

height: 100%;

background: yellow;

}

.center>.content {

flex: 1;

background: pink;

}

</style>

</head>

<body>

<div class="header">header</div>

<div class="content">content</div>

<div class="right">right</div>

</div>

<div class="footer">footer</div>

</body>

</html>

雙飛翼佈局實現以下：

<!DOCTYPE html>

<head>

<title>雙飛翼佈局</title>

<style>

.box{

height: 400px;

overflow: hidden;

}

.main-box,

.left,

.right{

float: left;

height: 100%;

}

.center{

margin-left: 100px;

margin-right: 100px;

}

.main-box{

width: 100%;

background: #333;

}

.left{

width: 100px;

background: #f8f8f8;

margin-left: -100%;

}

.right{

width: 100px;

background: #ccc;

margin-left: -100px;

}

</style>

</head>

<body>

</div>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。