左右结构div框自动伸缩示例

bbkkkk

于 2023-04-24 11:09:56 发布

阅读量287

点赞数

分类专栏：全栈之路-前端文章标签： css html css3

本文链接：https://blog.csdn.net/bbkkkk/article/details/130338546

版权

全栈之路-前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章展示了如何在CSSFlexbox的flex-grow无法满足需求时，通过JavaScript来自动计算宽度，实现动态调整大小的布局。示例中，作者创建了一个左右结构的页面，右侧div包含多个子div，这些子div的宽度会根据屏幕大小和数量自动适应，确保布局的灵活性。

摘要由CSDN通过智能技术生成

由于flex-grow不能很好解决最后一个div框与其他框长度问题，自己实现了一个自动计算宽度来动态调整大小的布局

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>左右结构div自动伸缩</title>
    <script src="./asserts/js/jquery-3.6.3.min.js"></script>

    <style></style>
    <script type="text/javascript"></script>
  </head>
  <body>
    <div style="height: 200px; width: 100%; position: relative; border: 1px solid rgb(107, 98, 98)">
      <div style="height: 200px; width: 300px; position: absolute; background-color: aqua"></div>
      <div style="height: 200px; width: calc(100vw - 320px); float: right; background-color: blue; display: flex; flex-direction: row; flex-wrap: wrap">
        <div style="height: 200px; width: 200px; background-color: rgb(11, 182, 182)"></div>
        <div style="height: 200px; width: 200px; background-color: rgb(11, 182, 182)"></div>
      </div>
    </div>

    <div style="height: 500px; width: 100%; position: relative; border: 1px solid red">
      <div style="height: 500px; width: 300px; position: absolute; background-color: aqua"></div>
      <div style="height: 500px; width: calc(100vw - 320px); float: right; background-color: blue">
        <div style="height: 200px; float: left; margin: 15px; width: calc((100% - 120px - 15px * 5) / 5); background-color: rgb(11, 182, 182)"></div>
        <div style="height: 200px; float: left; margin: 15px; width: calc((100% - 120px - 15px * 5) / 5); background-color: rgb(11, 182, 182)"></div>
        <div style="height: 200px; float: left; margin: 15px; width: calc((100% - 120px - 15px * 5) / 5); background-color: rgb(11, 182, 182)"></div>
        <div style="height: 200px; float: left; margin: 15px; width: calc((100% - 120px - 15px * 5) / 5); background-color: rgb(11, 182, 182)"></div>
        <div style="height: 200px; float: left; margin: 15px; width: calc((100% - 120px - 15px * 5) / 5); background-color: rgb(11, 182, 182)"></div>
        <div style="height: 200px; float: left; margin: 15px; width: calc((100% - 120px - 15px * 5) / 5); background-color: rgb(11, 182, 182)"></div>
        <div style="height: 200px; float: left; margin: 15px; width: calc((100% - 120px - 15px * 5) / 5); background-color: rgb(11, 182, 182)"></div>
        <div style="height: 200px; float: left; margin: 15px; width: calc((100% - 120px - 15px * 5) / 5); background-color: rgb(11, 182, 182)"></div>
        <div style="height: 200px; float: left; margin: 15px; width: calc((100% - 120px - 15px * 5) / 5); background-color: rgb(11, 182, 182)"></div>
        <div style="height: 200px; float: left; margin: 15px; width: calc((100% - 120px - 15px * 5) / 5); background-color: rgb(11, 182, 182)"></div>
      </div>
    </div>
  </body>
</html>