CSS 플로팅 요소 축소 부모 요소

오버플로 및 웹 개발 스택이 모두 새로 도입되어 인내심을 크게 얻었습니다. :)
HTML과 CSS를 제외한 모든 관련없는 부분을 맨 아래에서 찾을 수 있습니다. CSS와 HTML 요소를 스타일링 할 때CSS 플로팅 요소 축소 부모 요소

, 나는 부동 요소 및 부모 요소에 문제가 발생했습니다. ID가 인 div는 콘텐츠의 div 내에 포함되어 있으며 및 주입니다. nav에는 일종의 기본 탐색 모음으로 사용되는 정렬되지 않은 목록이 있으며 main에는 페이지의 단락과 "고기"가 들어 있습니다. 탐색 모음의 오른쪽에 단락을 배치하고 싶었 기 때문에 양쪽 모두를 배치하기로했습니다.

아래 CSS가 이러한 요소에 적용되었습니다.

#nav { 
width: 100px; 
float: left; 
} 

#nav ul { 
list-style-type: none; 
padding: 0px; 
} 

#main { 
width: 600px; 
float: right; 
}

내가 브라우저에서 내 코드를 실행

은 모든 것이 잘 보인다. 요소는 적절한 위치에 배치됩니다. 그러나 심사관 도구를 사용하여 면밀한 조사를 통해 ID 내용을 가진 부모 요소가 축소되었습니다.

저는 평판이 좋지 않아 불행히도 이미지를 게시 할 수 없습니다. 바라기를 이것은 충분한 정보입니다. 나는 이미 웹에서 문제를 찾았으며 나 자신과 같은 초보자들 사이에서는 꽤 흔한 것 같다. 나는 css-tricks.com에 기사를 읽고, 나는이 문제를 해결하기위한 그들의 방법을 시도했다. 불행히도, 이것은 아무 소용이 없었습니다. 추가 검색 후에 나는 혼란스러워했다. 나는이 질문의 광범위성에 대해 사과하고 싶다. 당신의 시간과 지식에 감사드립니다. 여기

당신이 사용할 수 있습니다이 경우

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Website</title> 
    <link rel="stylesheet" type="text/css" href="../css/refreshstyle.css"> 
</head> 
<body> 
    <div id="container"> 
     <div id="header"> 
      <h1>My Website</h1> 
     </div> 
     <div id="content"> 
      <div id="nav"> 
       <h3>Navigation</h3> 
       <ul> 
        <li><a class="home" href="">Home</a></li> 
        <li><a class="about" href="">About</a></li> 
        <li><a class="contacts" href="">Contact</a></li> 
       </ul> 
      </div> 
      <div id="main"> 
       <h2>Home Page</h2> 
       <p></p> 
       <p></p> 
       <p></p> 
       <p></p> 

      </div> 
     </div> 
      <div id="footer"> 
       Copyright &copy;2014 
      </div> 
    </div> 
</body>

는 CSS는 ...

body { 
background-image: url('congruent_pentagon.png'); 
} 
#container { 
background-color: white; 
width: 800px; 
margin-left: auto; 
margin-right: auto; 
border: 2px solid #a1a1a1; 
border-radius: 25px; 
} 
#header { 
background-color: #66CCFF; 
color: white; 
text-align: center; 
padding: 10px; 
border-bottom: 2px solid #a1a1a1; 
border-top-right-radius:23px; 
border-top-left-radius: 23px; 
} 
h1, h2, h3 { 
margin:0; 
} 
#nav { 
width: 100px; 
float: left; 
} 
#nav ul { 
list-style-type: none; 
padding: 0px; 
} 
a { 
text-decoration: none; 
color: #66CCFF; 
} 
#nav .home { 
font-weight: bold; 
} 
#main { 
width: 600px; 
float: right; 
} 
#content { 
padding: 10px; 
} 
#footer { 
clear: both; 
background-color: #B1F6CB; 
padding: 10px; 
margin: 0px; 
text-align: right; 
border-top: 2px solid #a1a1a1; 
border-bottom-right-radius: 23px; 
border-bottom-left-radius: 23px; 

}

출처

2014-11-02 John Henry

관련 HTML은 무엇입니까? 제발, 우리에게 설명해주지 마시고, * 저희에게 보여주십시오. –

사과드립니다. HTML과 CSS는 이제 내 게시물의 맨 아래에 있습니다. –

있습니다 .. HTML입니다 css clearfi x 클래스. 당신의 CSS에 clearfix 클래스를 정의 :

.clearfix:before, 
.clearfix:after { 
    content: ""; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
} 

.clearfix { 
    zoom: 1; /* ie 6/7 */ 
}

은 #content 요소에 귀하의 경우, 부모 요소에 clearfix 클래스를 사용

<div id="content" class="clearfix"> 
    [...] 
</div>

이 blog post에서 수레를 삭제에 대한 자세한 정보를 정기적으로 찾아보십시오.

Btw :

출처

2014-11-02 23:48:30

답장을 보내 주셔서 대단히 감사합니다. 나중에 블로그 게시물을 자세히 읽으려면 시간이 좀 걸릴 것입니다. 바라기를 이것은 내 문제를 해결할 것입니다. 시간 내 주셔서 대단히 감사합니다! :) –

답변

관련 문제