代码如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>双列</title><style>.container {width: 1200px;min-height: 800px;margin:0 auto;background-color: #0086b3;}.right {width: 200px;height: 300px;background-color: red;float:right;}.main {height: 400px;background-color: green;margin-right: 200px;}.left {width: 200px;height: 300px;background-color: yellow;float:left;}.main-2 {height: 400px;background-color: greenyellow;margin-left: 200px;}</style></head><body><div class="container"><!--右侧固定,左侧主体自适应不成功--><h2>右侧固定,左侧主体自适应不成功</h2><div class="right">右侧固定</div><div class="main">左侧主体自适应</div><!-- 左侧固定,右侧主体自适成功--><h2>左侧固定,右侧主体自适成功</h2><div class="left">左侧固定</div><div class="main-2">右侧主题自适应</div></div></body></html>
效果图:
为什么右侧固定,左侧自适应,为什么反了了,请教老师!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号