Question

我似乎没有一个标识和一张桌子并排，但彼此不是很近。我能够实现这一目标的唯一方法是使用表格，但图像和表格彼此非常接近。我想要在页面中间的表格，以及表格和左侧屏幕远端之间的徽标。

像这样

徽标表

这就是现在的样子

徽标

---表

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

Answer 1

使用两个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>

Answer 2

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

Answer 3

这应该是一个简单的方法，让你去实现你想要实现的目标..

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>

如何并排显示图像和表格

3 个答案: