>  기사  >  웹 프론트엔드  >  하위 div를 부동으로 설정한 후 상위 div가 자동으로 열리지 않는 문제를 해결하는 방법.

하위 div를 부동으로 설정한 후 상위 div가 자동으로 열리지 않는 문제를 해결하는 방법.

不言
不言원래의
2018-07-25 09:41:472508검색

이 기사에서 공유한 내용은 하위 div에 float를 설정하면 상위 div가 자동으로 열리지 않게 되는 내용입니다. 다음으로 구체적인 내용을 살펴보겠습니다. 모든 사람에게 도움이 되기를 바랍니다.

이유: 내부 p는 float:left 이후에 clean:both 및 display:block 스타일을 잃어서 외부 p가 늘어나지 않습니다.

다음은 몇 가지 해결 방법입니다(상위 p의 클래스가 "컨테이너"라고 가정).

  • 방법 1. 의사 클래스 사용

container::after{
    display: block;
    height:0;
    content: '';
    clear: both;
}
container{
    display: inline-block; /*第一种撑开办法,底下会有部分被遮到,所以添加这行,就完美了*/
}
  • 방법 2. 열지 않는 원칙은 다음과 같습니다. 오버플로는 보이지 않습니다. 따라서 상위 p에 Overflow:auto;를 추가하면 됩니다. IE의 경우 _height:1%;

container{
    overflow: auto;/*让主要内容区随内容自动撑开*/
    overflow-y:hidden;/*把出现的滚动条隐藏,但是底下会被遮到一点,不完美*/
     _height:1%;/*对IE的hack*/
}
  • 방법 3. 플로트를 지우려면 끝에 하위 p를 추가할 수 있습니다. : 11b4a98548f2002b90e10987f09bf85d94b3e26ee717c64999d7867364b1b4a3
    스타일을 설정합니다.clear{clear:both; height:1%; }5e61f882fc28a1ad04b8488b9fa829db94b3e26ee717c64999d7867364b1b4a3
    设置样式.clear{clear:both; font-size:0; height:1%;}

  • 方法4、可以设置父p的高度(也就是手动撑开,不灵活);

  • 方法5、直接给父p设置 display: inline-block; 这样也自动撑开

  • 方法6、直接给子p设置 display: inline-block; 也能自动撑开,但是排版问题有待研究学习

  • 方法7、从网上还发现了一种方法,给父p增加属性:display:table;

  • 方法8、 子p浮动我就套不住你?OK,我让父p也浮动: 父p设置 float: left;

방법 4. 상위 p의 높이를 설정할 수 있습니다(즉, 수동으로 확장하므로 유연하지 않습니다).

방법 5. display를 직접 설정합니다: inline- block;을 상위 p에 추가하면 자동으로 확장됩니다.

방법 6. display: inline-block;을 하위 p에 직접 설정할 수도 있습니다. 자동으로 열리지만 조판 문제는 연구하고 연구해야 합니다.

🎜🎜방법 7. 인터넷에서도 찾았습니다. 이 방법은 상위 p에 속성을 추가합니다: display:table;🎜🎜 🎜🎜방법 8. 자식 p가 떠 있으면 잡을 수 없나요? 좋아, 부모 p도 띄워 두겠습니다: 부모 p 설정float: left; 🎜🎜🎜🎜관련 권장 사항 : 🎜🎜🎜강조 표시된 코드와 중국어 구성 방법 프로세스를 구현하는tinymce 및 프리즘 🎜🎜🎜🎜html 요소를 동적으로 생성하고 요소에 속성을 추가하는 방법 방법 소개(코드 포함) 🎜🎜

위 내용은 하위 div를 부동으로 설정한 후 상위 div가 자동으로 열리지 않는 문제를 해결하는 방법.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.