Html 如何将元素与“显示内联图块”右侧对齐？

我的页脚有两个div标签。我想要一个在页面的左边，一个在右边。我使用display:inline块使两个div在同一行上，但我不能使它们浮动

<div id="footer">
    <div id="phone">
        <img id="pIcon" src="img/phone_icon.png" alt="Phone icon" />  
        <p id="pValue"> # </p>
    </div>
    <div id="email">
       <img id="eIcon" src="img/email_icon.png" alt="Email icon" />
       <p id="eValue"> # </p>
    </div>
</div> <!-- end of footer -->


#footer {
    width:100%;
    bottom:0;
    background-color:rgba(102,51,255,1);
}

#email {

    background-color:rgba(255,255,0,1);}

#phone, #email {
    display:inline-block;
    width:45%;
}

#pIcon, #pValue {
    display:inline-block;
}

#eValue, #eIcon {
    display:inline-block;
}

#
#
#页脚{
宽度：100%；
底部：0；
背景色：rgba（102,51255,1）；
}
#电子邮件{
背景色：rgba（255255,0,1）；}
#电话、电子邮件{
显示：内联块；
宽度：45%；
}
#pIcon，#p值{
显示：内联块；
}
#评估，艾肯{
显示：内联块；
}

电子邮件{ 背景色：rgba（255255,0,1）； 浮动：右；

---

}

您需要

文本对齐

属性。对于您希望左变为

左

右变为

右

#phone, #email {
    display:inline-block;
    width:45%;
    text-align: left;
    vertical-align: middle; //If you need vertical middle alignment
}
#email {
    text-align: right;
}

#

#
#页脚{
宽度：100%；
底部：0；
背景色：rgba（102,51,255,1）；
}
#电子邮件{
浮动：对；
显示：内联块；
背景色：rgba（255,255,0,1）；
}
#电话{
显示：内联块；
}
#艾肯，皮肯{
垂直对齐：底部对齐；
}

由于空格的原因，无法将其浮动。如果使用

display:inline或
显示：内联块

如果您想通过
display:inline block达到所需的布局您必须将HTML更改为这种难看的格式（这不是格式错误！）：

这是一本书。更多关于CSS技巧的信息是。
我想避免使用float作为电子邮件徽标和地址上移。这两个div都是内嵌显示的，所以你可以用一个小技巧对齐对齐该行，然后第一个div将位于左侧，第二个div将位于右侧。谢谢！我以前试过文本对齐，但似乎垂直对齐就成功了
<div id="footer">
    <p id="phone">
        <img id="pIcon" src="img/phone_icon.png" alt="Phone icon" />#</p>
    <p id="email">
        <img id="eIcon" src="img/email_icon.png" alt="Email icon" />#</p>
</div>

#footer {
    width:100%;
    bottom:0;
    background-color:rgba(102, 51, 255, 1);
}
#email {
    float:right;
    display:inline-block;
    background-color:rgba(255, 255, 0, 1);
}
#phone {
    display:inline-block;
}
#eIcon, #pIcon {
    vertical-align:bottom;
}

<div id="footer"><div id="phone">
    <img id="pIcon" src="img/phone_icon.png" alt="Phone icon" />  
    <p id="pValue"> # </p>
</div><div id="email">
   <img id="eIcon" src="img/email_icon.png" alt="Email icon" />
   <p id="eValue"> # </p>
</div></div> <!-- end of footer -->

<div id="footer" class="clearfix">
    <div id="phone">
        <img id="pIcon" src="img/phone_icon.png" alt="Phone icon" />
        <p id="pValue">#</p>
    </div>
    <div id="email">
        <img id="eIcon" src="img/email_icon.png" alt="Email icon" />
        <p id="eValue">#</p>
    </div>
</div> <!-- end of footer -->

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

#footer {
    bottom:0;
    background-color:rgba(102, 51, 255, 1);
}
#email {
    background-color:rgba(255, 255, 0, 1);
}
#phone, #email {
    float: left;
    width:50%;
}
#pIcon, #pValue {
    display:inline-block;
}
#eValue, #eIcon {
    display:inline-block;
}