5

我似乎无法将徽标和桌子并排放置，但彼此之间的距离不是很近。我能够做到这一点的唯一方法是使用表格，但是图像和表格变得非常接近。我想在页面中间的表格，以及表格和左侧屏幕远端之间的标志。

像这样

徽标表

这就是现在的样子

标识

- -桌子

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

3 回答 3

4

使用两个 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>
于 2013-02-11T16:45:34.607 回答
1

1) 不要使用表格进行布局。了解如何使用浮点数。

2) 为您的徽标使用 CSS 背景图像。UI 元素（不是页面内容）应该是 CSS 背景，而不是内联图像。

假设您的徽标是 100 x 100（相应调整）：

.logoContainer {
      background-image:url(../yourimage.png);
      background-repeat:no-repeat
      padding-left:100px;
      min-height:100px;      
}
于 2013-02-11T16:47:11.363 回答
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>
于 2013-02-11T16:49:00.027 回答