960 그리드 시스템에서 작동하지 않는 명확한 문제 수정

960 그리드 시스템으로 모형을 제작하고 .clearfix와 관련된 문제가 발생했습니다. 나는 명확한 방아쇠를 당기기 위해 내 코드에 여분의 div가있는 팬이 아니며, .clearfix 주위의 모든 문서는 해결책으로 제시된 것으로 보인다. 960gs도 자체적으로 clearfix 클래스를 제공하므로 내 기대로 작동해야합니다. 그러나 태그를 적용해도 아무 일도 일어나지 않습니다. 빈 div의 클리어 클래스가 작동합니다. 내가 clear를 강제하고자하는 요소의 clearfix 클래스가 실패하는 동안. 얼마나 많은 것이 clearfix에 있는지를 감안할 때, 그것은 제가 간과하고있는 것이어야합니다. 당신은이 작업을 수행하려면 부모 컨테이너에 clearfix 클래스를 적용해야합니다960 그리드 시스템에서 작동하지 않는 명확한 문제 수정

<html> 
<head> 
<title></title> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" /> 
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> 
<style type="text/css"> 
    div > div 
    { 
     height:3em; 
     background-color:Lime; 
    } 
</style> 
</head> 
<body> 
<div class="container_12"> 
    <div class="grid_4 clearfix"></div> 
    <div class="grid_4"></div> 
</div> 
</body> 
</html>

출처

2011-11-19 QueueHammer

나는 이것으로 돌아 왔고 해결책과 그것이 내가 배웠던 것을 발견했다.

이렇게 수정하면 요소가 들어있는 컨테이너가 계속 플로팅 된 후에 요소가 중지됩니다. 이것은 float 사용으로 인해 발생하는 흥미로운 문제입니다. 그러나이 상황에서 증상과 원인을 혼동하기 쉽습니다.

divs는 별도의 컨테이너에 있기 때문에 없어야 할 때 서로 "떠 다니는"요소입니다. 플로트를 지우지 않았기 때문이라고 가정합니다. 게다가 마크 업에 요소를 추가하여 "float을 지우는"방법을 포함하는이 문제에 대한 많은 해결책이 있습니다. 이 요소는 대개 스타일과 마침표로 "clear : both"또는 "& nbsp"를가집니다. 내용대로. 문제를 해결하는 것처럼 보이지만 다른 문제를 해결할 수있는 해킹이됩니다.

실제 문제는 부유하는 요소 만있는 컨테이너의 볼륨이 끝나지 않는 것입니다. 두 컨테이너가있는 경우 하나씩 다른 컨테이너가 있고 두 컨테이너가 접히고 레이아웃이 파손되어 플로트가 지워지지 않는 것처럼 보입니다. 그러나 해결 방법은 컨테이너에 오버플로 속성을 추가하는 것입니다. 내 경우에는 "overflow : auto"였습니다.

"고전적인"클리어 픽스 솔루션은 플로트와 볼륨이없는 요소를 추가하여 모든 것을 담는 컨테이너가 붕괴되지 않고 볼륨을 유지하도록합니다. 그러나 오버 플로우 속성을 설정하는 실제 문제를 해결할 수있는 해킹입니다.

출처

2013-07-01 14:50:19 QueueHammer

: 여기

는 소스입니다.

<div class="container_12 clearfix"> 
    <div class="grid_4"></div> 
    <div class="grid_4"></div> 
</div>

출처

2011-11-19 19:30:55 Leo

작동하지 않는 것 같습니다. 예를 들어 "수정"이 포함 된 모든 div에 적용됩니까? – QueueHammer

그래서 나는 오랫동안이 일로 돌아왔다. 당신이 제안한 것은 해결책의 절반이었습니다. 나머지 절반은 container_12에 overflow 속성을 추가하여 포함 된 모든 내용이 float 일 때 크기가 제공됩니다. – QueueHammer

960 그리드 시스템에서 작동하지 않는 명확한 문제 수정

답변

관련 문제