Html 放置多个方块

Question

我有一个页脚，我想将它放在底部。这是我的代码，但它不起作用。跨度不在一行中对齐。我也试过显示：内联。但是当我这样做时，跨度不会位于左侧、中心和右侧。 请帮帮我.

<div style="background-color:grey;width:100%;position:fixed;bottom:0px;">
            <div style="text-align:left;margin-left:10px;">
                <span>Site Developer: Mahan Lameie</span>
            </div>
            <div style="text-align:center;">
                <span>Copyright© 2020 Mahan Lameie</span>
            </div>
            <div style="text-align:right;margin-right:10px;">
                <span>E-mail:mahan.lameie87@gmail.com</span>
            </div>
</div>

Answer 1

一个好方法是使用 flexbox 让您的元素排成一行。这是一个示例，其中我将 display: flex; 添加到包装 div，然后将 flex-grow: 1; 添加到每个项目以定义增长和占用相等宽度的能力。

<div style="background-color:grey;width:100%;position:fixed;bottom:0px; display: flex; ">
    <div style="flex-grow: 1; text-align:left;margin-left:10px;">
        <span>Site Developer: Mahan Lameie</span>
    </div>
    <div style="flex-grow: 1; text-align:center;">
        <span>Copyright© 2020 Mahan Lameie</span>
    </div>
    <div style="flex-grow: 1; text-align:right;margin-right:10px;">
        <span>E-mail:mahan.lameie87@gmail.com</span>
    </div>
</div>

Answer 2

<div class="footer" style="background-color:grey;width:100%;position:fixed;bottom:0px;">
            <div style="text-align:left;margin-left:10px;">
                <span>Site Developer: Mahan Lameie</span>
            </div>
            <div style="text-align:center;">
                <span>Copyright© 2020 Mahan Lameie</span>
            </div>
            <div style="text-align:right;margin-right:10px;">
                <span>E-mail:mahan.lameie87@gmail.com</span>
            </div>
</div>

CSS :

.footer {
  display : flex;
}

.footer div{
flex-grow : 1
}

我添加了页脚 class 并为此 class 添加了一些样式。

Html 放置多个方块

Html position multiple blocks

html

css

css-position

footer