页面实现左中右布局，1. 左侧：宽度固定150px，高度自动撑开，和右侧同高 2. 中间：宽度自适应，高度自动撑开，和左侧同高 3. 右侧：宽度固定100px，高度自动撑开，和左侧同高，不用flex布局实现

可以使用传统的浮动布局来实现左中右布局。具体实现如下：

HTML代码：

<div class="container">
  <div class="left"></div>
  <div class="content"></div>
  <div class="right"></div>
</div>

CSS代码：

.container {
  overflow: hidden;
}
.left {
  float: left;
  width: 150px;
  height: 100%;
  background-color: #f0f0f0;
}
.content {
  margin-left: 150px;
  margin-right: 100px;
  height: 100%;
  background-color: #fff;
}
.right {
  float: right;
  width: 100px;
  height: 100%;
  background-color: #f0f0f0;
}

使用浮动布局时，需要注意以下几点：

1. 父容器要设置 `overflow: hidden;`，以防止子元素溢出；
2. 左侧和右侧元素要使用 `float: left;` 和 `float: right;` 进行浮动，同时需要设置固定宽度；
3. 中间元素要使用 `margin-left: 150px; margin-right: 100px;` 进行左右间距的设置，同时也要设置高度为100%。

相关问题

页面实现左中右布局，1. 左侧：宽度固定150px，高度自动撑开，和右侧同高 2. 中间：宽度自适应，高度自动撑开，和左侧同高 3. 右侧：宽度固定100px，高度自动撑开，和左侧同高

可以使用 CSS 的 flexbox 布局来实现左中右布局，具体代码如下：

HTML 代码：

<div class="container">
  <div class="left">左侧内容</div>
  <div class="middle">中间内容</div>
  <div class="right">右侧内容</div>
</div>

CSS 代码：

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}

.left {
  width: 150px;
  flex: 0 0 150px;
}

.middle {
  flex: 1;
}

.right {
  width: 100px;
  flex: 0 0 100px;
}

解释一下 CSS 的属性：

1. `display: flex;` 设置容器为 flexbox 布局。
2. `flex-wrap: wrap;` 设置 flexbox 中的子元素可以换行。
3. `align-items: stretch;` 设置子元素在容器中垂直方向上拉伸，使其与容器等高。
4. `justify-content: space-between;` 设置子元素在容器中水平方向上分布，左右两个子元素与容器两端对齐。
5. `flex: 0 0 150px;` 设置子元素的 flex 属性，其中第一个值为 flex-grow，表示子元素在容器中占用剩余空间的比例；第二个值为 flex-shrink，表示子元素在容器中缩小的比例；第三个值为 flex-basis，表示子元素在容器中的初始大小。对于左右两个子元素，flex-grow 和 flex-shrink 都为 0，只有 flex-basis 不同；对于中间子元素，flex-grow 为 1，flex-shrink 和 flex-basis 都为 0，表示子元素会占用容器中剩余的空间。

写出三栏布局,左侧固定宽度100px,右侧固定宽度200px,中间宽度自适应浏览器窗口

<div style="display:flex;">
<div style="width:100px; background-color:red;"></div>
<div style="flex:1; background-color:blue;"></div>
<div style="width:200px; background-color:green;"></div>
</div>