html - 文本不会留在 DIV 内

Question

即使查看者决定在浏览器中缩放文本，我也希望文本保留在 DIV 中。现在文本刚好在 DIV 之外。我确定我可能缺少或搞砸了一些代码。

代码如下:

.footer {
        height: 110px;
        width: 1024px;
        background-color: #000000;
        margin: auto;
        -webkit-box-shadow: 1px 2px 20px 0 #000000;
        -moz-box-shadow: 1px 2px 20px 0 #000000;
        box-shadow: 1px 2px 20px 0 #000000;
        font-family: 'Jura', serif;
        font-size: 20px;
        color: #ffffff;
    }

<div class="footer">

        <span style="position:relative;top:15px;left:0px">
            <a href="mailto:jamie@diversedesigning.com">jamie@diversedesigning.com</a>
        </span>

        <span style="position:relative;top:15px;left:300px">
            © 2017 diversedesigning.com
        </span>

    </div>

Answer 1

尝试使用父 div 的跨度和相对位置进行绝对定位。

.footer {
height:110px;
width:100%;
background-color:#000000; 
margin: auto;
-webkit-box-shadow: 1px 2px 20px 0 #000000;
-moz-box-shadow: 1px 2px 20px 0 #000000;
box-shadow: 1px 2px 20px 0 #000000;
font-family: 'Jura', serif;
font-size: 20px;
color:#ffffff;
position:relative;
}

.footer span:first-child
{
  position:absolute;
  top:15px;
  left:0px
}

.footer span:last-child
{
  position:absolute;
  top:15px;
  right:0px
}

<div class="footer">

<span ><a  href="mailto:jamie@diversedesigning.com">jamie@diversedesigning.com</a></span>

<span>© 2017 diversedesigning.com</span>

</div>