사업부가 제대로 부유하지 않습니다.

Question

저는이 세 개의 사업부를 왼쪽으로 띄우기 위해 한 줄에 모두 표시하려고합니다. 그러나 float를 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; 
     } 

Answer 1

먼저 - 당신이 #utensils, #food{에서 오타를 가지고, 당신은 모든 float:left; 둘째가 필요합니다, 당신은 모든 요소에 부동 속성을 설정해야합니다 당신은 떠 있어야합니다. 간단히 시작하고 세 개의 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> 

당신이 요소가 아무리 많은 당신은 창 크기를 조정하는 방법을 장소에 머물 없는지 확인이 방법 ...

Answer 2

난 당신이 그냥 "clearfix"을 추가한다고 생각합니다.

<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; 
} 

다음은 HTML입니다.

Answer 3

"세 divs"라고 할 때 좀 더 자세하게 말하십시오 ... 어쨌든, 최소한 콘텐츠와 기본 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; 
}