Html定位多块

Question

我有一个页脚，我想把它放在底部。这是我的代码，但它不工作。跨度不对齐在一行。我也试过display: inline。但是当我这样做的时候，跨度不定位在左边，中间和右边。请帮助我.

<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:[email protected]</span>
            </div>
</div>

Answer 1

<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:[email protected]</span>
            </div>
</div>

CSS 。

.footer {
  display : flex;
}

.footer div{
flex-grow : 1
}

我添加了footer类，并为这个类添加了一些样式。

Answer 2

一个好的方法是使用 flexbox 来让你的元素排成一行。这里是一个例子，我在这里添加了 display: flex; 到你的wrapping 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:[email protected]</span>
    </div>
</div>