两栏布局

2021-01-23 本文已影响0人我是Msorry

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>