左侧固定宽度，右侧自适应宽度铺满剩余屏幕

来源：互联网发布：阿里巴巴淘宝城四期编辑：程序博客网时间：2024/06/05 04:58

1、左边左浮动，右边加overflow:hidden;

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.left{width: 200px;float: left;background: #000;height: 300px;color: #fff;font-size: 40px;}.right{background: red;height: 300px;color: #fff;font-size: 40px;overflow: hidden;}</style></head><body><div class="box"><div class="left">left</div><div class="right">right</div></div></body></html>

2、左边左浮动，右边加margin-left

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.left{width: 200px;float: left;background: #000;height: 300px;color: #fff;font-size: 40px;}.right{background: red;height: 300px;color: #fff;font-size: 40px;margin-left: 200px;}</style></head><body><div class="box"><div class="left">left</div><div class="right">right</div></div></body></html>

3、左边绝对定位，右边加margin-left

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.left{position: absolute;left: 0;top: 0;width: 200px;height: 300px;background: #000;color: #fff;font-size: 40px;}.right{margin-left: 200px;height: 300px;color: #fff;font-size: 40px;background: red;}</style></head><body><div class="box"><div class="left">left</div><div class="right">right</div></div></body></html>

4、左右都绝对定位，右边加width，top，left，right

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.left{position: absolute;left: 0;top: 0;width: 200px;height: 300px;background: #000;color: #fff;font-size: 40px;}.right{position: absolute;left: 200px;top: 0;width: 100%;height: 300px;background: red;right: 0;}</style></head><body><div class="box"><div class="left">left</div><div class="right">right</div></div></body></html>

0 0