[英]How can I display an image and a table side by side
我似乎無法並排放置徽標和桌子,但彼此之間距離不是很近。 我能夠做到這一點的唯一方法是使用表格,但是圖像和表格變得非常接近。 我想將表格放在頁面中間,並在表格和左側屏幕的遠端之間找到徽標。
像這樣
徽標表
這就是現在的樣子
商標
- -表
<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>
使用兩個div並設置為向左浮動
<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>
1)不要使用表格進行布局。 了解如何使用FLOATS。
2)使用CSS背景圖片作為徽標。 UI元素(不是頁面內容)應該是CSS背景,而不是嵌入式圖像。
假設徽標為100 x 100(請相應調整):
.logoContainer {
background-image:url(../yourimage.png);
background-repeat:no-repeat
padding-left:100px;
min-height:100px;
}
這應該是讓您繼續努力實現目標的簡單方法。
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.