博主信息
博文 145
粉丝 7
评论 7
访问量 202192
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于双列排版自适应问题:(左侧固定,右侧自适应)成功,(右侧固定,左侧自适应)不成功求原因
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
原创
2462人浏览过

代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>双列</title>
  6. <style>
  7. .container {
  8. width: 1200px;
  9. min-height: 800px;
  10. margin:0 auto;
  11. background-color: #0086b3;
  12. }
  13. .right {
  14. width: 200px;
  15. height: 300px;
  16. background-color: red;
  17. float:right;
  18. }
  19. .main {
  20. height: 400px;
  21. background-color: green;
  22. margin-right: 200px;
  23. }
  24. .left {
  25. width: 200px;
  26. height: 300px;
  27. background-color: yellow;
  28. float:left;
  29. }
  30. .main-2 {
  31. height: 400px;
  32. background-color: greenyellow;
  33. margin-left: 200px;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div class="container">
  39. <!--右侧固定,左侧主体自适应不成功-->
  40. <h2>右侧固定,左侧主体自适应不成功</h2>
  41. <div class="right">右侧固定</div>
  42. <div class="main">左侧主体自适应</div>
  43. <!-- 左侧固定,右侧主体自适成功-->
  44. <h2>左侧固定,右侧主体自适成功</h2>
  45. <div class="left">左侧固定</div>
  46. <div class="main-2">右侧主题自适应</div>
  47. </div>
  48. </body>
  49. </html>

效果图:

为什么右侧固定,左侧自适应,为什么反了了,请教老师!

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
1条评论
李**¹⁸⁰³⁹⁵⁴⁰¹²⁰ 2019-12-31 17:16:50
整体设置了宽度,所以无法自适应
1楼
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学