左右宽度固定中间内容自适应html布局的三种方法

一时失言乱红尘 2022-01-31 12:15 409阅读 0赞

牛客网的一道面试题，要求左右宽度固定中间自适应，如下图的布局方式
在这里插入图片描述
一、弹性布局
父元素display：flex子元素会全部并列在一排。
子元素中flex:n的宽度会将父元素的宽度/n
如flex:1，宽度就等于父元素宽度。

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. text-align: center;
  5. font-size: 25px;
  6. color: white;
  7. line-height:100px;
  8. }
  9. .header{
  10. width: 100%;
  11. height: 100px;
  12. background-color: #7ecef3;
  13. }
  14. .center{
  15. display: flex;/  !
  16. }
  17. .content{
  18. background-color: #53b9b1;
  19. flex:1;/  !
  20. }
  21. .left_bar{
  22. height: 700px;
  23. width: 200px;
  24. background-color: #89c997;
  25. }
  27. .right_bar{
  28. width: 200px;
  29. background-color: #89c997;
  30. }
  31. .footer{
  32. width: 100%;
  33. height: 100px;
  34. background-color: #7ecef3;
  35. }
  37. <div class="header">header</div>
  38. <div class="center">
  39.  <div class="left_bar">left_bar</div>
  40.  <div class="right_bar">right_bar</div>
  41.  <div class="content">content</div>
  42. </div>
  43. <div class="footer">footer</div>

二、absolute相对定位

  1. .header{
  2.     width: 100%;
  3.     height: 100px;
  4.     background-color: #7ecef3;
  6. }
  7.  .center{
  8.     position: relative;
  9.  }
  10.  .content{
  11.     background-color: #53b9b1;
  12.    position: absolute;/ !
  13.    left: 200px; !
  14.    right: 200px;// !
  15.     height: 500px;
  16.  }
  17.   .left_bar{
  18.       width: 200px;
  19.       position: absolute;
  20.       left: 0;
  21.       background-color: #89c997;
  22.       height: 500px;
  23.       }
  25.  .right_bar{
  26.       width: 200px;
  27.       background-color: #89c997;
  28.       position: absolute;
  29.       right:  0;
  30.       height: 500px;
  31.       }
  32.  .footer{
  33.     width: 100%;
  34.     height: 100px;
  35.     background-color: #7ecef3;
  36.     position: absolute;
  37.      bottom: 0;
  38. }

三、float浮动，加margin-left、margin-right

  1. .header {
  2.         width: 100%;
  3.         height: 100px;
  4.         background-color: #7ecef3;
  5.     }
  6.     .left_bar {
  7.         width: 200px;
  8.         background-color: #89c997;
  9.         float: left;
  10.         height: 500px;
  11.     }
  12.     .right_bar {
  13.         width: 200px;
  14.         background-color: #89c997;
  15.         float: right;
  16.         height: 500px;
  17.     }
  18.     .content {
  19.         background-color: #53b9b1;
  20.         margin-left: 200px;/  !
  21.         margin-right: 200px;/ !
  22.         height: 500px;
  23.     }
  25.     .footer {
  26.         width: 100%;
  27.         height: 100px;
  28.         background-color: #7ecef3;
  29.     }

浮动时注意先后顺序，否则会达不到效果

  1. <div class="left_bar">left_bar</div>
  2.  <div class="right_bar">right_bar</div>
  3.  <div class="content">content</div>

发表评论

表情：
评论列表 （有 0 条评论，409人围观）

还没有评论，来说两句吧...

相关阅读