2013-02-11 72 views
4

我似乎沒有一個標誌和一張桌子並排,但彼此並不非常接近。我能夠實現這一目標的唯一方法是使用一張桌子,但圖像和桌子變得非常接近。我想要位於頁面中間的表格以及表格和左側屏幕最遠端之間的徽標。我怎樣才能並排顯示圖像和桌子

這樣

標識表

這是怎麼回事,現在

標誌

---表

<div id="header" style="height:15%;width:100%;"> 
    <img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/> 
    <table border="1" width="44" style="margin-left:30%;float:top;"> 
    <tr> 
      <td><h1><a href="home">Home</a></h1></td> 
      <td><h1><a href="home">Home</a></h1></td> 
      <td><h1><a href="home">Home</a></h1></td> 
    </tr> 
    </table> 
</div> 

回答

2

使用兩種股利和設置浮動左

<div id="header" style="height:15%;width:100%;"> 
    <div style='float:left'> 
     <img src="/e-com/images/logo.jpg" style="margin-left:15%;margin-top:5%"/> 
    </div> 
    <div style='float:leftt'> 
     <table border="1" width="44" style="margin-left:30%;float:top;"> 
      <tr> 
       <td><h1><a href="home">Home</a></h1></td> 
       <td><h1><a href="home">Home</a></h1></td> 
       <td><h1><a href="home">Home</a></h1></td> 
      </tr> 
     </table> 
    </div> 
</div> 
+0

讓他們中的一個左移,另一個右移將它們放在屏幕的最左側和右側。但至少他們是在同一層面上,所以我改變了桌子向右漂移。 – ethio 2013-02-11 17:12:48

+0

很高興聽到它爲你工作...祝你好運 – Garry 2013-02-11 17:13:46

+0

對於未來的讀者,我編輯了圖像和標題左對齊的答案 – Garry 2017-03-14 17:02:31

0

1)不要使用表格進行佈局。瞭解如何使用FLOATS。

2)爲您的徽標使用CSS背景圖片。 UI元素(不是頁面內容)應該是CSS背景,而不是內嵌圖像。

假設你的標誌是100×100(相應調整):

.logoContainer { 
     background-image:url(../yourimage.png); 
     background-repeat:no-repeat 
     padding-left:100px; 
     min-height:100px;  
} 
0

這應該是一個簡單的方法來獲得ü打算什麼烏爾努力實現..

http://jsfiddle.net/8NDZP/

<div style='float:left'> 
    <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Moscow_July_2011-7a.jpg/325px-Moscow_July_2011-7a.jpg'> 
</div> 
<div style='float:right'> 
    <table border="1" width="44" style="margin-left:30%;float:top;"> 
     <tr> 
      <td> 
       <h1><a href="home">Home</a></h1> 

      </td> 
      <td> 
       <h1><a href="home">Home</a></h1> 

      </td> 
      <td> 
       <h1><a href="home">Home</a></h1> 

      </td> 
     </tr> 
    </table> 
</div> 
相關問題