CSS 自适应布局

w460270218 · 发表于 2022-4-18 15:55

已知：• 布局分为：父元素A和N个子元素B；• A宽度不固定：最小宽度为1000px，内部边距是32px• B的宽度不固定：相邻两个B元素的间距是16px，所有B的宽度相同，边框为1像素，颜色为999• 每行只能有3个B元素，超过的话需要换行；最左侧B元素和最右侧的B元素，距离A的边缘都是32px；

[HTML] 纯文本查看 复制代码

HTML
<div class="client-a">
   <div class="client-b"></div>
   <div class="client-b"></div>
   <div class="client-b"></div>
   <div class="client-b"></div>
   <div class="client-b"></div>
   ...
</div>

<style>

</style>

zhzhch335 · 发表于 2022-4-18 17:12

去看一下flex布局好搞的（百度搜一下看阮一峰老师那个就够用）
主要用到flex-wrap flex-grow flex-basis这几个属性

w460270218 · 发表于 2022-4-18 23:40

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .father {
      width: 50%;
      box-shadow: 0 0 10px rgb(31 55 153 / 10%);
      background: #FFF;
      padding: 20px;
    }

    ul {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin: 0 -13px;
    }

    ul div {
      box-sizing: border-box;
      width: 33.33%;
      padding: 0 13px;
      margin-bottom: 24px;
    }

    ul div li {
      list-style: none;
      padding: 10px;
      border-radius: 4px;
      border: 1px solid #EBEDF0;
    }

    .father .second {
      height: 100px;
      background: yellowgreen;
    }
  </style>
</head>

<body>
  <div class="father">
    <ul>
      <div>
        <li>1111</li>
      </div>
      <div>
        <li>222</li>
      </div>
      <div>
        <li>333</li>
      </div>
      <div>
        <li>444</li>
      </div>
      <div>
        <li>555</li>
      </div>
    </ul>
    <div class="second">我是第二个子元素</div>
  </div>

</body>

</html>

return2002 · 发表于 2022-4-26 09:49

用 flex布局+流式布局 b站有视频 csdn有实例演示

帐号		自动登录	找回密码
密码			注册[Register]

[求助] CSS 自适应布局