博主信息
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
博文
19
粉丝
0
评论
3
访问量
2271
积分:0
P豆:38

关于双列排版自适应问题:(左侧固定,右侧自适应)成功,(右侧固定,左侧自适应)不成功求原因

2019年12月24日 21:14:47阅读数:553博客 / 李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰ / 学习中遇到的问题

代码如下:

  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>

效果图:

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

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
  • 李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰· 2019-12-31 17:16:501楼
  • 整体设置了宽度,所以无法自适应

  • 回复