Question

基本上，我的网站上有一个导航栏。在导航栏的中心，我希望我的网站名称居中。这当然很容易，但现在我希望我的网站的徽标位于它的左侧。 Float：left不起作用，因为这只是将徽标放在导航栏的最左侧。

<!doctype html> 
<html>
    <head>
        <style>
            *
            {
            margin: 0em;
            padding: 0em;
            }
            #container {
            width:100%;
            border:1px solid #999;
            margin:0px auto 0;
            overflow:hidden;
            background: gray;
            }
            #name {
            text-align: center;
            position: relative;
            }
            #top-left {
            position: relative;
            float: left;
            border: 1px solid black;
            }
            #top-right {
            float:right;
            margin-bottom:10px;
            }
            #bottom-right {
            float:right;
            clear:both;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
            <img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
            <img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
            <h1 id="name">champion</h1>
        </div>
    </body>
</html>

Answer 1

你可以做到这一点：

<table style="background-color:Gray; width:100%;" >     
    <tr>        
      <td style="text-align:right; width:45%">
        <img id="top-left" src="http://www.webmasterworld.com/gfx/logo.png" alt="">
      </td>
      <td style="text-align:left;  width:30%""> 
            <h1 id="name">champion</h1>
      </td>
      <td style="text-align:right; width:25%;">
        <img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
      </td>
    </tr>       
    <tr style="text-align:right;"> 
       <td colspan="3">
        <img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
      </td>
    </tr>
</table>

Answer 2

我在这里运行float: left似乎正在运行。我猜我可能会遗漏一些东西。你可以放一个jsfiddle或者偶然展示一个实例。

Here's what I see

Answer 3

你可以这样做。它使用:before将徽标附加到标题文字：http://codepen.io/pageaffairs/pen/bchLo

<!doctype html> 
<html>
    <head>
        <style>
            *
            {
            margin: 0em;
            padding: 0em;
            }

            #container {
            width:100%;
            border:1px solid #999;
            margin:0px auto 0;
            overflow:hidden;
            background: gray;
            text-align: center;
            }

            #name {
            line-height: 56px;
            position: absolute;
            width: 100%;
            }

            #top-right {
            float:right;
            margin-bottom:10px;
            }

            #bottom-right {
            float:right;
            clear:both;
            }

            h1 span {
                position: relative;
                display: inline-block;
                padding: 0 20px;
            }

            h1 span:before {
                content: "";
                width: 109px;
                height: 56px;
                background: url(http://www.webmasterworld.com/gfx/logo.png);
                position: absolute;
                top: 0;
                right: 100%;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <img id="top-right" src="http://www.pubcon.com/exhibitor/gfx/markethealth.gif" alt="">
            <img id="bottom-right" src="http://www.webmasterworld.com/theme/default/gfx/donate1.gif" alt="">
            <h1 id="name"><span>champion</span></h1>
        </div>
    </body>
</html>

在CSS中定位图像

3 个答案: