尝试让两个div显示在同一行上

缘由

摸鱼的时候在V2EX上看到一篇帖子,通过JS代码实现控制台输出某网站LOGO,感觉挺有意思的,想将其当网页元素插入网页,因此就有了本文。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>尝试让两个div显示在同一行上</title>
    <style>
        .porn {
            color: #ffffff;
            background: #000000;
            padding:5px 10px;
            font-size:40px;
            border-radius:12px 0 0 12px;
        }
        .hub {
            color: #000000;
            background: #FE9A00;
            padding:5px 10px;
            font-size:40px;
            border-radius:0 12px 12px 0;
        }
    </style>
</head>
<body>
    <!-- 一个div内嵌套两个div,设置这两个被嵌套的 div 的 style 属性为"float: left;" -->
    <!-- 此方法一般都会有效的,但不建议这么做 -->
    <div style="display: inline;">
        <div class="porn" style="float: left;">Porn</div>
        <div class="hub" style="float: left;">hub</div>
        <div style="clear:both;"></div> <!-- 清除float效果 -->
        <!-- div 设置 float之后,如果没有清除 -->
        <!-- 则下一个被设置 float 的 div 会根据上一个 float 的 div 的布局进行排版 -->
        <!-- 而下一个没设置 float 属性的 div 则是根据它的前一个元素进行排版。 -->
    </div>
    <br />
    <!-- 当行内元素处理 -->
    <div>
        <div class="porn" style="display: inline;">Porn</div>
        <div class="hub" style="display: inline;margin-left:-4px;">hub</div>
    </div>
    <br />
    <!-- table大法好! -->
    <table style="margin: 0px;padding: 0px;">
        <td style="margin: 0px;padding: 0px;"><div class="porn" style="margin-left: -2px;">Porn</div></td>
        <td style="margin: 0px;padding: 0px;"><div class="hub" style="margin-left: -2px;">hub</div></td>
    </table>
</body>
</html>
posted @ 2019-05-04 14:18  林博士  阅读(7220)  评论(0编辑  收藏  举报