查看: 2065|回复: 0

[DIV/CSS] CSS 三栏布局方法归纳

发表于 2018-3-1 08:01:29
中间自适应,两边固定

image

1.用margin和float实现

css:

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. text-align: center;
  6. }
  7. .left {
  8. float: left;
  9. width: 100px;
  10. background: yellow;
  11. }
  12. .right {
  13. float: right;
  14. width: 100px;
  15. background: green;
  16. }
  17. .center {
  18. margin: 0 100px;
  19. background: #ccc;
  20. }
  21. </style>
复制代码

html

  1. <div class="container">
  2. <div class="left">left</div>
  3. <div class="right">right</div>
  4. <div class="center">center</div>
  5. </div>
复制代码
2.用float,margin负值实现

css

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. text-align: center;
  6. }
  7. .left, .right, .center {
  8. float: left;
  9. }
  10. .left {
  11. width: 100px;
  12. margin-left: -100%;
  13. background: yellow;
  14. }
  15. .right {
  16. width: 100px;
  17. margin-left: -100px;
  18. background: green;
  19. }
  20. .center {
  21. width: 100%;
  22. background: #ccc;
  23. }
  24. </style>
复制代码

html

  1. <div class="container">
  2. <div class="center">center</div>
  3. <div class="left">left</div>
  4. <div class="right">right</div>
  5. </div>
复制代码
3.用flex实现

css

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. text-align: center;
  6. }
  7. .container {
  8. display: flex;
  9. }
  10. .left {
  11. width: 100px;
  12. background: yellow;
  13. }
  14. .right {
  15. width: 100px;
  16. background: green;
  17. }
  18. .center {
  19. flex: 1;
  20. background: #ccc;
  21. }
  22. </style>
复制代码

html

  1. <div class="container">
  2. <div class="left">left</div>
  3. <div class="center">center</div>
  4. <div class="right">right</div>
  5. </div>
复制代码
中间固定,两边自适应

image

1. 用margin和float实现

css

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. text-align: center;
  6. }
  7. .container {
  8. padding: 0 100px;
  9. }
  10. .left {
  11. float: left;
  12. width: 50%;
  13. margin-left: -100px;
  14. background: yellow;
  15. }
  16. .right {
  17. float: right;
  18. width: 50%;
  19. margin-right: -100px;
  20. background: green;
  21. }
  22. .center {
  23. float: left;
  24. width: 200px;
  25. background: #ccc;
  26. }
  27. </style>
复制代码

html

  1. <div class="container">
  2. <div class="left">left</div>
  3. <div class="center">center</div>
  4. <div class="right">right</div>
  5. </div>
复制代码
2. 用flex实现

css

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. text-align: center;
  6. }
  7. .container {
  8. display: flex;
  9. }
  10. .left {
  11. flex: 1;
  12. background: yellow;
  13. }
  14. .right {
  15. flex: 1;
  16. background: green;
  17. }
  18. .center {
  19. width: 200px;
  20. background: #ccc;
  21. }
  22. </style>
复制代码

html

  1. <div class="container">
  2. <div class="left">left</div>
  3. <div class="center">center</div>
  4. <div class="right">right</div>
  5. </div>
复制代码


回复

使用道具 举报