css內嵌定位的div

我正在嘗試創建一個標題，它被分成3格他們將被設置爲顯示：內聯塊左頭部分將包含一個口號和一個標誌， t的口號是徽標的權利css內嵌定位的div

問題是我的標誌div和我的標語div總是放在另一個之上。

我的理解一個內聯元素將在同一塊旁邊放置到最後內聯元素用，注意頭部左div有250像素的寬度和每個孩子div的有100像素寬度，爲什麼他們沒有把一個放在另一個旁邊？

我的標記：

<div id="header"> 
     <div id="header-left"> 
       <div id="logo" /> 
       <div id="slogan"> 
       <span> Buy For U</span>   
       </div> 
     </div> 
</div>

我的CSS：

div#header 
{ 
    border: 1px solid black ; 
    height: 200px; 
} 
div#header div#header-left 
{ 
    display: inline-block;  
    height: 100%; 
    width: 250px; 

} 
div#header div#header-left div#logo 
{ 
    display: inline-block; 
    background: url("Google-Desktop-64.png") no-repeat center; 
    background-size: 25%; 
    height: inherit; 
    width: 100px; 
} 
div#header div#header-left div#slogan 
{ 
    display: inline-block; 
    height: inherit; 
    width:100px; 
}

來源

2012-01-18 eran otzap

一切都很好。請正確關閉徽標的<div>。 "self-closing" tags。

<div id="header"> 
     <div id="header-left"> 
       <div id="logo"></div> 
       <div id="slogan"> 
       <span> Buy For U</span>   
       </div> 
     </div> 
</div>

我也建議使用<img>爲標誌（並使其主頁的鏈接），而不是隻是一個背景。驗證期間空的<div>標籤容易出錯。

來源

2012-01-18 23:56:14 Joseph

一個有點想去死至少它確實工作，就像我認爲它:) 謝謝fskreuz –

@eranotzer這是我們傾向於忽略的最簡單的東西:) – Joseph

你的#header的寬度爲200像素，子標題爲250像素，但我認爲最好使用浮點數。這意味着，兩個div是彼此相鄰：

div#header div#header-left div#logo 
{ 
    float: left; 
    background: url("Google-Desktop-64.png") no-repeat center; 
    background-size: 25%; 
    height: inherit; 
    width: 100px; 
} 

div#header div#header-left div#slogan 
{ 
    float: left; 
    height: inherit; 
    width:100px; 
}

你NEAD明確在你的HTML/CSS：

.clear_left { clear: left; }

和HTML：

<div id="header"> 
    <div id="header-left"> 
     <div id="logo" /> 
     <div id="slogan"><span> Buy For U</span></div> 
     <div class="clear_left"></div> 
    </div> 
</div>

來源

2012-01-18 23:58:00

我不想使用f因此我不必清除任何東西標題寬度未設置，因此它是一個自動設置爲100％寬度的塊其他只是解釋性值以表明它們的確適合。 –

@eranotzer你爲什麼不想使用花車？每個瀏覽器都不支持內嵌塊。 –

我不知道如何去做。 :) ，我讀到他們應該避免。當我還是一個孩子時，一個浮子從左邊和右邊調戲我，並且疤痕還沒有清除到今天。 –

css內嵌定位的div

回答

相關問題