對齊在同一行的div

Question

如何使公司標誌div adjacebt的名稱，地址，電子郵件和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>