左侧固定，右侧自适应（两种方法任选）

2024-07-11 09:07:35

字体：大中小

来源：转载

供稿：网友

第一种方法：

<!DOCTYPE><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.one {position: absolute;height: 200px;width: 300px;background-color: blue;}.two {height: 200px;margin-left: 300px;background-color: red;}</style></head><body><div class="one"></div><div class="two">第一种方法</div></body></html>

第二种方法：

<!DOCTYPE><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.one {float:left;height: 200px;width: 300px;background-color: blue;}.two {overflow: auto;height: 200px;background-color: red;}</style></head><body><div class="one"></div><div class="two">第二种方法</div></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持VeVb武林网！

注：相关教程知识阅读请移步到CSS教程频道。

上一篇：css小技巧汇总

下一篇：解析width:100%;与width:auto;的区别