css实现“五筒”结构

drunkyouthhhhh

已于 2022-06-14 20:20:12 修改

阅读量282

点赞数

文章标签： css css3 html

于 2022-06-14 20:19:15 首次发布

本文链接：https://blog.csdn.net/drunkyouthhhhh/article/details/125285008

版权

本文介绍了如何使用CSS实现类似五筒的结构，提供两种方法：一是利用position定位，通过控制子元素偏移量；二是借助flex布局，通过设置flex-wrap、justify-content和align-content属性。在实际操作中，针对特定需求，可能需要调整DOM结构来达到预期效果。

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

一、描述

实现类似于五筒的结构，如图。
在这里插入图片描述

二、方法

1.定位

第一种方法使用position定位实现，子绝父相，控制子元素各方向的偏移量即可实现：

 <style>
    .container {
   
      width: 300px;
      height: 300px;
      background-color: #d1d7e6;
      font-size: 30px;
      line-height: 100px;
      text-align: center;
      /* 父元素开启相对定位 */
      position: relative;
    }

    /* 各个子元素开启绝对定位，并根据位置控制偏移量
    比如1号盒子在左上角，因此设置left和top为0
     */
    .box1 {
   
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
      left: 0;
      top: 0;
    }

    .box2 {
   
      width: 100px;
      height: 100px;
      background-color: skyblue;
      position: absolute;
      right: 0;
      top: 0;
    }

    .box3 {
   
      width: 100px;
      height: 100px;
      background-color: #bfa;
      position: absolute;
      /* 这里实现三号盒子的水平垂直居中 */
      top