css3的居中,flex和普通的悬挂布局

最新推荐文章于 2024-06-24 08:29:11 发布

_panda_

最新推荐文章于 2024-06-24 08:29:11 发布

阅读量943

点赞数

本文链接：https://blog.csdn.net/qq_18832439/article/details/53666298

版权

web前端技术同时被 2 个专栏收录

68 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

css3的居中,flex和普通的悬挂布局

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

<head>
    <title>悬挂布局</title>
    <meta charset="utf-8">
    <style type="text/css" media="screen">
    * {
        margin: 0;
        padding: 0;
    }

    .left {
        position: fixed;
        left: 25%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .right {
        position: fixed;
        left: 75%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .hrLine {
        height: 100%;
        width: 2px;
        border: 1px dotted lightblue;
        position: fixed;
        left: 50%;
    }
    /* left/right */

    .Media {
        width: 200px;
        display: flex;
        align-items: flex-start;
    }

    .Media-figure {
        margin-right: 1em;
    }

    .Media-body {
        flex: 1;
        display: block;
    }
    /*flex 悬挂布局  */

    .container {
        padding-top: 40px;
        width: 300px;
        height: 100px;
        border: 1px dotted blue;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* margin-bottom: 80px; */
    }

    .content {
        text-align: center;
    }

    .channel {
        /* padding-top: 80px; */
        display: inline-block;
        width: 82px;
        vertical-align: top;
        /* margin: ; */
    }

    .channel-container {
        display: inline-block;
        width: 60%;
        word-break: break-all;
    }

    .channel-container label {
        margin-right: 10px;
    }

    .channel-container label input {
        margin-right: 16px;
        width: auto;
        height: auto;
        line-height: inherit;
        text-indent: 0;
    }
    /* 普通悬挂布局 */
    </style>
</head>

<body>
    <div class="left">
        <div class="Media">
            <img class="Media-figure" src="images/adper_pic.png" height="30" width="30" alt="">
            <div>
                <p class="Media-body">figure adasd asdwad adsda dawsdaf adsdfa a dasd </p>
                <div style="margin-top:10px;">
                    <label>
                        <input type="radio" name="website" data-name="news" value="1">新闻</label>
                    <label>
                        <input type="radio" name="website" data-name="zy" value="2">测试</label>
                    <label>
                        <input type="radio" name="website" data-name="finance" value="3">财经</label>
                    <label>
                        <input type="radio" name="website" data-name="tech" value="4">科技</label>
                </div>
            </div>
        </div>
    </div>
    <hr class="hrLine">
    <!--  -->
    <div class="right">
        <div class="container">
            <div class="content">
                <div class="channel">所属频道：</div>
                <div class="channel-container">
                    <label>
                        <input type="radio" name="website" data-name="news" value="1">新闻</label>
                    <label>
                        <input type="radio" name="website" data-name="zy" value="2">测试</label>
                    <label>
                        <input type="radio" name="website" data-name="finance" value="3">财经</label>
                    <label>
                        <input type="radio" name="website" data-name="tech" value="4">科技</label>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

_panda_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3的居中,flex和普通的悬挂布局

css3的居中,flex和普通的悬挂布局<!DOCTYPE html><html lang="en"><head> <title>悬挂布局</title> <meta charset="utf-8"> <style type="text/css" media="screen"> * { margin: 0; padding: 0;
复制链接

扫一扫

专栏目录