HTML/CSS DIV不DIV

裝修我有CSS和HTML一個問題，我不明白爲什麼會這樣HTML/CSS DIV不DIV

HTML：

<body> 
    <div id="header"> 
    <div id="header_conteiner"> 
     <div id="logo_container"> 
     <img src="images/logo.png" /> 
     </div> 
     <input type="text" id="txtSearch" class="text_input" /> 
    </div> 
    </div> 
</body>

CSS：

body{ 
    background:#787777; 
    font-family:"Droid Sans",Helvetica,Arial,Sans-Serif; 
    font-size:0.81em; 
    margin: 0px; 
    padding: 0px; 
} 

#header{ 
    height:100px; 
    background:#000000; 
    width:100%; 
    margin:0px; 
    border:0px solid #6F3; 
} 

#header_conteiner{ 
    width:1000px; 
    height:100px; 
    border:1px solid #9F0; 
    margin:0 auto; 
} 

#logo_container{ 
    padding-top:3px; 
    width:237px; 
    height:100px; 
    border:1px solid #03F; 
} 

#txtSearch{ 
    width:220px; 
    height:20px; float:right; 
}

這是結果： enter image description here

正如你在圖像輸入文本中看到的是header_conteiner任何人都可以給我一些建議嗎？

來源

2012-01-29 Irakli Lekishvili

頂部填充一下添加到#header_conteiner：

float: left; 
    clear: both;

所以結果是這樣的：

#header_conteiner{ 
    width:1000px; 
    height:100px; 
    border:1px solid #9F0; 
    margin:0 auto; 
    float: left; 
    clear: both; 
}

來源

2012-01-29 19:53:05 OrangeTux

將標誌容器前的輸入移動到之前。

來源

2012-01-29 19:44:33 Czechnology

謝謝你的工作，但仍然不明白爲什麼html這樣工作 – 2012-01-29 19:45:38

因爲輸入元素實際上被放置在標誌容器下，然後你告訴它正確地浮動。如果先輸入輸入，則它將正確地浮動，而不會佔用標識容器的空間，該空間可以保持不變。 – Czechnology 2012-01-29 19:49:16

簡而言之，如果你想要更多的塊元素彼此相鄰放置，浮動元素必須先放置。放置_after_非浮動元素的任何浮動元素將放置在它下面。 – Czechnology 2012-01-29 19:51:15

logo_container是一個div，一個塊元素。這意味着它佔據了容器的水平空間;下一個HTML元素將被強制在它下面。由於logo_container設置爲100px，與header_conteiner相同，因此您的輸入框沒有剩餘的垂直空間。它被強制在logo_container之下。

要解決該問題，可以將logo_container設置爲內嵌元素並將其左移。內聯元素可以彼此相鄰，而塊行元素需要它們自己的水平空間。

CSS顯示屬性：http://www.w3schools.com/cssref/pr_class_display.asp

來源

2012-01-29 19:45:38 IsisCode

它看起來像logo_container對的3px的

來源

2012-01-29 19:46:07

HTML/CSS DIV不DIV

回答

相關問題