DIV左、右布局

1、右边宽度固定,左边自适应

  第一种(flex布局,不兼容IE9以下浏览器):

<style>
body {
display: flex;
} .left {
background-color: aqua;
height: 200px;
flex: 1;
} .right {
background-color: bisaue;
height: 200px;
width: 100px;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>

  第二种:

<style>
div {
height: 200px;
} .left {
float: right;
background-color: aqua;
width: 200px;
} .right {
background-color: bisaue;
margin-right: 200px;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>

2、左边定宽,右边自适应:

<style>
.left {
float: left;
width: 200px;
background-color: aqua;
height: 200px;
} .right {
background-color: bisque;
height: 200px;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
上一篇:Struts2中Action之ResultType


下一篇:eclipse菜单栏不显示 + the system is running in lou-graphics mode问题