第一个浮动元素与第二个浮动元素

我试图做一个简单的页面，该页面需要整个浏览器窗口。它包含两个要素，问题是第二个与第一个重叠第一个浮动元素与第二个浮动元素

form 
{ 
    background-color:#996600; 
    width:30%; 
    height:100%; 
    float:left;  
    font:"Arial Black", Gadget, sans-serif; 
    color:#FFF 
} 

#risultati 
{ 
    width:70%; 
    background-color:#0099FF; 
    font:"Arial Black", Gadget, sans-serif; 
    color:#FFF 
} 


<body> 

<form action""> 
<label>Inserisci ragione sociale</label> 
    <input name="chiave" onkeyup="showHint(this.value)"/> 

<!-- <input type="submit"/> --> 
</form> 

<p id="risultati">Risultati: <span id="txtHint"></span></p> 


</body>

问题在哪里？

编辑：我注意到，重叠效果只有第二个元素的backgorund属性（“Risultati”字通常是浮动的）。我期望背景从第一个元素的结尾开始占据浏览器空间的其余部分。相反，它从第一个元素所在的浏览器左侧开始。

来源

2013-02-08 Sonia

一个元素是float: left而另一个元素不是;这是造成重叠。试着在你的CSS添加float: left到#risultati声明：

#risultati 
{ 
    width:70%; 
    background-color:#0099FF; 
    font:"Arial Black", Gadget, sans-serif; 
    color:#FFF; 
    float: left; 
}

来源

2013-02-08 16:55:38 sbeliv01

OMG它的工作。我发誓，已经tryed此解决方案之前发布的前面回答，但没有奏效。谢谢你的帮助，对不起问题的人很抱歉:( – Sonia 2013-02-08 16:57:33

总之它不完美，第二个元素不是第一个元素，但是它的位置在第一个元素下面 – Sonia 2013-02-08 17:07:39

第一个浮动元素与第二个浮动元素

回答

相关问题