不定向剧中布局

花殇

已于 2023-03-29 19:41:58 修改

阅读量56

点赞数

分类专栏：移动端 css 文章标签： css css3 html

于 2023-03-29 19:39:15 首次发布

本文链接：https://blog.csdn.net/2302_76953773/article/details/129843819

版权

移动端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

文章介绍了使用弹性盒模型和普通定位方法来实现轮播图底部分页按钮的布局。第一种方法利用flexbox实现居中对齐和底部对齐；第二种方法结合relative和absolute定位，保持按钮在底部居中。这两种技术都是CSS布局的重要应用场景。

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

比如轮播图中的分页按钮

  /* 弹性盒 */
        /*   .box{
            width: 300px;
            height: 150px;
            background-color: aqua;
            display: flex;
            justify-content: center;
            align-items: flex-end;
        }
        .box div{
            width: 30px;
            height: 30px;
            background-color: blueviolet;
            border-radius: 50%;
            margin: 10px;
        } */
 结构：
    <!--    <div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>1</div>
<div>2</div>
<div>3</div>
</div> -->

/* 普通方法 */
        .box{
            width: 300px;
            height: 150px;
            background-color: aqua;
            position: relative;
        }
        .box section{
            text-align: center;
            width: 100%;
            position: absolute;
            bottom: 0;
        }
        .box div{
            width: 30px;
            height: 30px;
            background-color: blueviolet;
            border-radius: 50%;
            display: inline-block;
            margin: 5px;
        } 
结构：
 <div class="box">
        <section>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </section>
    </div>