簡體   English   中英

如何並排顯示圖像和表格

[英]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;      
}

這應該是讓您繼續努力實現目標的簡單方法。

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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM