flex布局
父元素设置 display:flex，固定元素设置固定的宽度和高度，另一个元素设置flex:1;宽度自适应
float
- 父元素设置一个高度，添加清除浮动，给固定的元素设置浮动和宽度高度，另一个元素宽度自适应，如果另一个元素长度更长，设置
margin和固定元素的宽度一样 - 两个子元素同时浮动，自适应元素设置宽度为
calc(100% - 固定元素宽度)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/* 清除浏览器默认边距 */
* {
margin: 0;
padding: 0;
}
/* 双float */
.container {
overflow: hidden;
}
.left {
float: left;
width: 200px;
height: 200px;
background: purple;
}
.right {
float: left;
background: skyblue;
height: 600px;
width: calc(100% - 200px);
}
</style>
</head>
<body>
<div class="container">
<div class="left">
left
</div><!--
--><div class="right">
right
</div>
</div>
</body>
</html>
position 布局
父元素 position:relative;，固定元素设置固定的宽度和高度，设置 position:absolute;，另一个元素设置 margin 和固定元素一样，宽度自适应
table 布局
父元素设置display:table，固定的元素设置宽的和高度，设置 display: table-cell，另一个元素设置 display: table-cell 宽度自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/* 清除浏览器默认边距 */
* {
margin: 0;
padding: 0;
}
/* 表格布局 */
.container {
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 200px;
height: 200px;
background: purple;
}
.right {
display: table-cell;
background: skyblue;
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
</body>
</html>
缺点：两个子元素高度一样
inline-block
两个子元素设置 display:line-block，固定元素设置宽高，自适应元素设置宽度 calc(100% - 固定元素宽度) ;两个子元素可以看成是两个字符了，因为html书写的时候有空格，所以会有空隙，解决空隙的方法是，父元素的 font-size: 0; 或者 在 HTML 上利用注释消除空格；两个子元素的 font-size 必须一样
//消除空格
/div><!--
--><div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/* 清除浏览器默认边距 */
* {
margin: 0;
padding: 0;
}
.left {
display: inline-block;
width: 200px;
height: 200px;
background: purple;
font-size: 20px;
}
.right {
display: inline-block;
background: skyblue;
height: 200px;
width: calc(100% - 200px);
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
left
</div><!--
--><div class="right">
right
</div>
</div>
</body>
</html>
网友评论