신비한 : after css 규칙

나는 최근 대규모 웹 프로젝트를 물려 받았습니다. 이 작업을 시작하기 전에 주로 응용 프로그램 작업을 수행 했으므로 일부 기술은 나에게 새롭습니다.신비한 : after css 규칙

는 CSS는 다음 클래스가 : 사물의

.group:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

제비 모든 클래스 중 하나로서 그룹이 웹 사이트를 통해. 멀리 볼 수있는 한,이 CSS를 참조하는 유일한 비트입니다.

나는 많은 것을하고있는 것처럼 보이지 않았기 때문에 몇몇 장소에서 그룹 수업을 치우려고했다. 그러나 이로 인해 모든 종류의 이상한 요소가 잘못되었습니다. 예를 들어 한 요소의 색상이 다음 요소로 넘어가는 것처럼 보일 수 있습니다. 요소의 끝에 마침표를 추가하면 왜 멈추는 지 알 수 없습니다.

아무도 날 elighten 수 있을까요?

편집 : 다음은 그룹 수업이 사용되는 장소 중 하나입니다. div를 클래스 래퍼 만 포함하도록 제거하면 페이지 전체가 손상됩니다.

더 일반적으로 "clearfix"로 알려진

<div id="header">  
    <div class="wrapper group"> 
     <div class="fl"> 
      <a href="default.aspx">myHandle</a> | 
      <a href="~/features.aspx" runat="server" id="A1">features</a> | 
      <a href="~/about-businessbook.aspx" runat="server" id="A3">about</a> 
     </div> 
     <asp:Panel ID="pnlNotLoggedIn" runat="server" cssclass="fr"> 
      <a href="~/loginpro.aspx" runat="server" id="lnkHome">sign in</a> | 
      <a href="~/registerpro.aspx" runat="server" id="lnkAbout">sign up</a> 
     </asp:Panel> 
    </div> 
</div>

출처

2011-07-29 Oliver

엘리먼트 뒤에 마침표가 추가 된 HTML 스 니펫을 표시 할 수 있습니까? –

'div class = "f1"'이고 패널이 모두 왼쪽으로 떠있었습니다? 그리고 페이지가 정확히 어떻게 깨 집니까? –

- 덜 인식 할 경우 "그룹이"틀림없이 더 의미 클래스 이름입니다하지만.

그것은 "명백한/수레를 포함"하는 기술이다 : clearfix에 http://www.ejeliot.com/blog/59

상세 정보 : 당신이보고있는 무엇

출처

2011-07-29 17:00:08 thirtydot

정보를 제공해 주셔서 감사합니다.나는 css 표준에서 이렇게 이상한 작은 조각과 조각이별로 없었 으면 좋겠다. – Oliver

가 .clearfix입니다 효과는 가상 클래스 인 :after을 사용합니다. 숨겨진 콘텐츠 블록이 추가되면 .group 요소가 부 풀린 콘텐츠를 모두 감싸므로 background colors이 올바른 영역을 채울 수 있습니다.

출처

2011-07-29 17:00:21 zzzzBov

내가 실수 일 수는 있지만 .group:after은 .clearfix으로 사용 중입니다. 많은 일을하는 것 같지 않지만 페이지를 올바르게 렌더링 할 수 있으므로 페이지를 그대로 두어야합니다.

출처

2011-07-29 17:01:14

또한, 속성이 정의 된 clear: both;이라는 사실은 흔히 사용되는 부동 소수점 (예 : float: right; 또는 float: left;)을 의미하며,이 클래스는이를 중립화하는 데 사용됩니다.

출처

2011-07-29 17:01:41 Donnie

:after은 셀타 후 컨텐트를 삽입 할 수있는 가상 클래스입니다. 이 경우 콘텐츠가 떠돌 았을 가능성이있는 .group을 올바르게 지우는 명확한 수정이 추가되었습니다. 이로 인해 컨테이너가 모든 내용을 포함하도록 확장되지 않을 수 있습니다. 그것은 :after의 장점은 별도의 마크 업을 필요로하지 않는다는 것입니다

<div class="group"> 
…content here… 
    <div style="clear:both"></div> 
</div>

의 거친 상당합니다.

출처

2011-07-29 17:02:24

신비한 : after css 규칙

답변

관련 문제