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
<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

<!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有实例演示

页: [1]

吾爱破解 - 52pojie.cn's Archiver

CSS 自适应布局