电子邮件{

Question

我的页脚有两个div标签。我想要一个在页面的左边，一个在右边。我正在使用display：inline-block，两个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;
}

Answer 1

您需要text-align财产。对于您希望保留的left和right

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

Demo

Answer 2

<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;
}

Answer 3

由于白色空间，你无法浮动它们。如果您使用的是display: inline;或display: inline-block;，则会占用空格。

如果您希望使用display: inline-block;达到所需的布局，则必须将HTML更改为此丑陋（这不是格式错误！）：

<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 -->

我更喜欢更清洁的解决方案，使用浮动和清除属性。

HTML 的

<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 -->

CSS

.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;
}

这是working fiddle。有关clearfix CSS技巧的更多信息是here。

Answer 4

电子邮件{

背景色：RGBA（255,255,0,1）; 的浮动：右; }

如何使用显示内联块将元素右对齐？

4 个答案:

电子邮件{