Question

如何使公司徽标div与名称，地址，电子邮件和iphone容器相关联... 我试着让显示内联并向右浮动，但它没有向上移动...... 在下面提供我的代码....

http://jsfiddle.net/CfzSF/embedded/result/

<div style="width: 464px;">

    <div class="page-title">Company Name</div>
    <div style="font-size: 12px; color: #222;">Name:</div>
    <div style="font-size: 12px; color: #222;">Address:</div>
    <div style="font-size: 12px; color: #222;">Email:</div>
    <div style="font-size: 12px; color: #222;">Phone:</div>


</div>


<div style="border: 1px solid #1a4567; width: 100px; float: right;">
    <div>Company</div>
    <div>Logo</div>
</div>

Answer 1

使用display: inline-block - 水平对齐元素

此外，您可以选择使用float - 它会产生相同的效果。

修改

您还应该在包含float: left字段的容器中添加name, address, email, and phone。通过给容器保持这些元素float，容器不会占据屏幕的整个宽度，而是占据最宽元素的宽度。

工作示例：

http://jsfiddle.net/ee6GW/4/

Answer 2

将浮动物放在非浮动物品前面。

<div style="border: 1px solid #1a4567; width: 100px; float: right;">
    <div>Company</div>
    <div>Logo</div>
</div>
<div style="width: 464px;">
    <div class="page-title">Company Name</div>
    <div style="font-size: 12px; color: #222;">Name:</div>
    <div style="font-size: 12px; color: #222;">Address:</div>
    <div style="font-size: 12px; color: #222;">Email:</div>
    <div style="font-size: 12px; color: #222;">Phone:</div>
</div>

将div对齐在同一行

2 个答案: