2013-02-11 74 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> 
相关问题