Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 关于双列排版自适应问题：（左侧固定，右侧自适应）成功，（右侧固定，左侧自适应）不成功求原因
Blogger Information
Blog 145
fans 7
comment 7
visits 164558
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
关于双列排版自适应问题：（左侧固定，右侧自适应）成功，（右侧固定，左侧自适应）不成功求原因
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
2245 people have browsed it

代码如下：

  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.         }
  14.         .right {
  15.             width: 200px;
  16.             height: 300px;
  17.             background-color: red;
  18.             float:right;
  19.         }
  20.         .main {
  21.             height: 400px;
  22.             background-color: green;
  23.             margin-right: 200px;
  24.         }
  26.         .left {
  27.             width: 200px;
  28.             height: 300px;
  29.             background-color: yellow;
  30.             float:left;
  32.         }
  33.         .main-2 {
  34.             height: 400px;
  35.             background-color: greenyellow;
  36.             margin-left: 200px;
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41. <div class="container">
  42. <!--右侧固定，左侧主体自适应不成功-->
  43.     <h2>右侧固定，左侧主体自适应不成功</h2>
  44.     <div class="right">右侧固定</div>
  45.     <div class="main">左侧主体自适应</div>
  46. <!--    左侧固定，右侧主体自适成功-->
  47.     <h2>左侧固定，右侧主体自适成功</h2>
  48.     <div class="left">左侧固定</div>
  49.     <div class="main-2">右侧主题自适应</div>
  53. </div>
  54. </body>
  55. </html>

效果图：

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

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
李**¹⁸⁰³⁹⁵⁴⁰¹²⁰ 2019-12-31 17:16:50
整体设置了宽度，所以无法自适应
1 floor
Author's latest blog post