我只是试图将这3个div放到左边，这样它们就在一行中。但每当我将浮动左侧应用于id = abkitchen时，它就不会浮动。我认为这是因为我在页面顶部有一个固定的标题。知道怎么做才能正确漂浮吗？提前谢谢。
HTML：
<div id="headnav">
<ul>
<li><a href="theact.html" target="_self">The Act</a></li>
<li><a href="kitchenact.html" target="_self" class="active">Kitchen Act</a></li>
<li><a href="socialact.html" target="_self">Social Act</a></li>
</ul>
</div>
<div id="logo"><img src="images/logo.png"></div>
<div id="filters">
<div class="section" id="utensils">
<ul>
<li>HANDS<input type="checkbox" name="hands" value=".hands" id="hands"><label for="hands"></label></li>
<li>FORK<input type="checkbox" name="fork" value=".fork" id="fork"><label for="fork"></label></li>
</ul>
</div>
<div class="section" id="food">
<ul>
<li><input type="checkbox" name="burger" value=".burger" id="burger"><label for="burger">BURGER</label></li>
<li><input type="checkbox" name="cupcake" value=".cupcake" id="cupcake"><label for="fork">CUPCAKE</label></li>
</ul>
</div>
</div>
<div id="abkitchen"><p><em>Kitchen Act</em> is an exploration presenting a series of videos that investigate the interaction people have with everyday utensils. By pairing everyday food with an unexpected utensil, for instance, a burger with chopsticks, these interactions aim to foster an appreciation towards these tools that are often considered secondary to food. By establishing that utensils are the bridge between us and our food, these videos assert that utensils play a defining role in our experience of a meal.</p></div>
CSS：
#headnav{
z-index:101;
position: absolute;
top: 0px;
height: 35px;
width: 100%;
background: #f9f9f9;
text-align: left;
font-size: 1em;
overflow: hidden;
padding: 0.35em 0.5%;
vertical-align: middle;
}
#headnav ul{
display:inline-block;
list-style-type:none;
margin:auto 0;
padding:8px;
}
#headnav li{
display:inline;
padding-right:10px;
margin-top:10px;
font-size: 14px;
}
#logo{
float:left;
padding:15px;
}
#abkitchen{
background-color: #E0E0E0;
padding:15px;
text-align: left;
width:50%;
}
#filters{
text-align: left;
padding:15px;
/*background-color: white;*/
}
#utensils, #food{
display: inline-block;
float:left;
width:auto;
height:auto;
background-color: yellow;
}
#utensils{
text-align: right;
padding-top: 15px;
padding-left: 15px;
padding-bottom: 15px;
}
#food{
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
margin-left: -5px;
}
li{
list-style-type: none;
}
答案 0 :(得分：0)
首先 - #utensils, #food{中有拼写错误，您需要float:left;
其次，您需要将float属性设置为需要浮动的所有元素。
从简单开始，然后制作三个漂浮的div，然后在那里工作。
您将遇到的下一个问题是 - 您的div向下移动。您需要为所有这些设置宽度，然后将它们全部封装在更大的div中。在所有浮动div之后，我个人将一个空的div放在其中clear: both;。
观察：
<div style="width: 381px; border: 1px solid #000000;">
<div style="float: left; width: 125px; border: 1px solid #FF0000;">
I am RED!!!
</div>
<div style="float: left; width: 125px; border: 1px solid #00CC00;">
I am Green!!!
</div>
<div style="float: left; width: 125px; border: 1px solid #0000FF;">
I am Blue!!!
</div>
<div style="clear: both;"></div>
</div>
<div style="border: 1px solid #000000;">And my behaviour is completely unacceptable!</div>
这样，无论您调整窗口大小，都要确保元素保持原位......
答案 1 :(得分：0)
我认为你应该添加＆＃34; clearfix＆＃34;。
这是HTML：
<div id="logo"><img src="images/logo.png"></div>
<div id="filters">
<div class="section" id="utensils">
<ul>
<li>HANDS<input type="checkbox" name="hands" value=".hands" id="hands"><label for="hands"></label></li>
<li>FORK<input type="checkbox" name="fork" value=".fork" id="fork"><label for="fork"></label></li>
</ul>
</div>
<div class="section" id="food">
<ul>
<li><input type="checkbox" name="burger" value=".burger" id="burger"><label for="burger">BURGER</label></li>
<li><input type="checkbox" name="cupcake" value=".cupcake" id="cupcake"><label for="fork">CUPCAKE</label></li>
</ul>
</div>
</div>
<div id="abkitchen"><p><em>Kitchen Act</em> is an exploration presenting a series of videos that investigate the interaction people have with everyday utensils. By pairing everyday food with an unexpected utensil, for instance, a burger with chopsticks, these interactions aim to foster an appreciation towards these tools that are often considered secondary to food. By establishing that utensils are the bridge between us and our food, these videos assert that utensils play a defining role in our experience of a meal.</p></div>
<div class="clearfix"></div>
CSS代码：
#logo{
float:left;
padding:15px;
}
#abkitchen{
background-color: #E0E0E0;
padding:15px;
text-align: left;
width:50%;
}
#filters{
text-align: left;
padding:15px;
/*background-color: white;*/
}
#utensils, #food{
display: inline-block;
float;left;
width:auto;
height:auto;
background-color: yellow;
}
#utensils{
text-align: right;
padding-top: 15px;
padding-left: 15px;
padding-bottom: 15px;
}
#food{
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
margin-left: -5px;
}
li{
list-style-type: none;
}
.clearfix{
clear: both;
}
我希望它能正常运作。
答案 2 :(得分：0)
当你说“三个div”时，试着更具体一点...... 无论如何，我建议你首先添加最小内容和一些基本CSS的div。当这工作时，开始添加内容和更多的CSS。
HTML
<div id="logo">
<p>this is logo</p>
</div>
<div id="filters">
<p>this is filters</p>
</div>
<div id="abkitchen">
<p>this is abkitchen</p>
</div>
CSS：
#logo,
#filters,
#abkitchen {
float: left;
padding: 20px;
border: 1px solid #eee;
}