2013-04-10 52 views
0

如何使公司標誌div adjacebt的名稱,地址,電子郵件和iphone的容器... 我試圖給予內聯和浮動權顯示,但它不動起來... 提供我的下面的代碼....對齊在同一行的div

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> 

回答

4

使用display: inline-block - 對齊元素水平

此外,你必須使用float的選項 - 它將具有相同影響。

編輯:

您還應該添加一個float: left到容器持有name, address, email, and phone領域。通過給持有這些元素的容器一個float,容器不會佔據屏幕的整個寬度,而是佔據最寬元件的寬度。

工作實例:

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

0

的非浮動的項目之前擺正浮動。

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