java布局方式_前端常见的布局方式

浮动布局

左右固定宽高，设置左右浮动，中间内容设置overflow:hidden宽度自适应

.left {

width: 200px;

height: 300px;

float: left;

background-color: red;

}

.right {

width: 200px;

height: 300px;

float: right;

background-color: green;

}

.middle {

height: 300px;

overflow: hidden; /*重要的一步*/

background-color: gray;

border: 1px solid #000;

}

运行效果：

圣杯布局

三个盒子都设置为浮动，浮动方向都为同一方向，中间内容盒子设置width: 100%,两边内容固定宽高，假设浮动方向都为left，那么左边盒子设置margin-left: -100%; 右边盒子设置为margin-left为负的自身宽度，书写dom结构时先写中间内容的盒子，再写左右盒子

.middle {

width: 100%;

height: 300px;

background-color: gray;

float: left;

}

.left {

width: 200px;

height: 300px;

background-color: red;

float: left;

margin-left: -100%;

}

.right {

width: 200px;

height: 300px;

background-color: green;

float: left;

margin-left: -200px;

}

运行效果：

双飞翼布局

基本上和圣杯布局没什么两样，无非就是中间内容盒子里面在嵌套一个子元素，并设置这个子元素的左右两边的margin为左右两边盒子的宽度

.middle {

width: 100%;

height: 300px;

background-color: gray;

float: left;

}

.middle-content {

margin: 0 200px;

}

.left {

width: 200px;

height: 300px;

background-color: red;

float: left;

margin-left: -100%;

}

.right {

width: 200px;

height: 300px;

background-color: green;

float: left;

margin-left: -200px;

}

这是中间内容

运行效果：