웹 프론트엔드 HTML 튜토리얼 两个子DIV float并排后,如何使这两个DIV的高度相同

两个子DIV float并排后,如何使这两个DIV的高度相同

Jun 01, 2016 am 09:53 AM
div float height

两个个子DIV的内容高度不同,当对他们设置float:left的时候,就会出现版面效果的问题(DIV高度不一致)。那么,如何让这两子DIV的高度一致呢(即:如何让内容DIV的高度能自动适合容器DIV的高度)。我们可以利用css的margin-bottom:-9999px和padding-bottom:9999px来解决这个问题。

将父容器的overflow设置为hidden,再将内容少的div设置margin-bottom:-9999px和padding-bottom:9999px;
代码如下:

<code>


<title>两个子DIV float并排后,如何使这两个DIV的高度相同</title>


<div style="width:605px;overflow:hidden;">
    <div style="float:left;width:300px; background:#EFEFEF;margin-right:5px;margin-bottom:-9999px;padding-bottom:9999px;">
    内容少
    </div>
    <div style="float:left;width:300px;background:#F7F7F7;">
    内容多<br>
    内容多<br>
    内容多<br>
    内容多<br>
    内容多<br>
    内容多<br>
    内容多<br>
    内容多<br>
    内容多<br>
    </div>
    <div style="clear:both;"></div>
</div>

</code>
로그인 후 복사

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

float의 최대값은 얼마입니까? float의 최대값은 얼마입니까? Oct 11, 2023 pm 05:54 PM

float의 최대값: 1. C 언어에서 float의 최대값은 3.40282347e+38입니다. IEEE 754 표준에 따르면 float 유형의 최대 지수는 127이고 가수의 자릿수는 23입니다. 이런 방식으로 최대 부동 소수점 수는 3.40282347 e+38입니다. 2. Java 언어에서 최대 부동 소수점 값은 3.4028235E+38입니다. Python 언어에서 최대 부동 소수점 값은 1.7976931348623157e+308입니다.

CSS를 사용하여 div에 모서리가 누락되었음을 인식하는 방법 CSS를 사용하여 div에 모서리가 누락되었음을 인식하는 방법 Jan 30, 2023 am 09:23 AM

div에 모서리가 없음을 인식하는 CSS 방법: 1. HTML 샘플 파일을 만들고 div를 정의합니다. 2. div의 너비와 높이 배경색을 설정합니다. 3. 삭제해야 하는 div에 의사 클래스를 추가합니다. 모서리를 지정하고 의사 클래스를 배경색과 동일한 색상 사용으로 설정한 다음 45도 회전한 다음 제거해야 할 모서리에 배치합니다.

ChatGPT API를 기반으로 한 단어 표시 번역 브라우저 스크립트 구현 ChatGPT API를 기반으로 한 단어 표시 번역 브라우저 스크립트 구현 May 01, 2023 pm 03:28 PM

머리말 최근에는 GitHub에 ChatGPTAPI 기반의 브라우저 스크립트인 openai-translator가 있습니다. 단기간 내에 번역 지원 외에도 다듬기 및 요약 기능도 지원됩니다. -ins, 또한 Tauri 패키징을 사용합니다. Tauri가 Rust 부분을 사용한다는 사실을 제외하면, 브라우저 부분은 여전히 ​​수동으로 구현하기가 쉽습니다. 예를 들어 openAI에서 제공하는 인터페이스에서는 다음 코드를 복사하고 브라우저 콘솔에서 요청을 시작하여 번역을 완료할 수 있습니다. //예제 constOPENAI_API_KEY="s

데이터베이스 부동 길이는 얼마입니까? 데이터베이스 부동 길이는 얼마입니까? Oct 10, 2023 pm 03:57 PM

일반적인 데이터베이스 부동 소수점 길이는 다음과 같습니다. 1. MySQL의 부동 소수점 유형 길이는 4바이트 또는 8바이트일 수 있습니다. 2. Oracle의 부동 소수점 유형 길이는 4바이트 또는 8바이트일 수 있습니다. 3. SQL Server의 부동 소수점 유형 길이는 다음과 같습니다. 4바이트로 고정됩니다. PostgreSQL에서 float 유형의 길이는 4바이트 또는 8바이트 등이 될 수 있습니다.

float의 정확도는 얼마나 됩니까? float의 정확도는 얼마나 됩니까? Oct 17, 2023 pm 03:13 PM

float의 정밀도는 소수점 이하 6~9자리까지 가능합니다. IEEE754 표준에 따르면 float 형식이 나타낼 수 있는 유효 자릿수는 약 6~9자리입니다. 이는 이론상 최대 정밀도일 뿐이며, 부동 소수점 숫자의 반올림 오류로 인해 float 유형의 정밀도가 낮아지는 경우가 많습니다. 컴퓨터에서 부동 소수점 연산을 수행할 때 부동 소수점 숫자의 정밀도 제한으로 인해 정밀도 손실이 발생할 수 있습니다. 부동 소수점 숫자의 정밀도를 향상시키기 위해 double 또는 long double과 같은 정밀도가 더 높은 데이터 유형을 사용할 수 있습니다.

C 언어에서 플로트는 무엇을 의미합니까? C 언어에서 플로트는 무엇을 의미합니까? Oct 12, 2023 pm 02:30 PM

C 언어의 부동 소수점은 단정밀도 부동 소수점 숫자를 나타내는 데 사용되는 데이터 유형입니다. 부동 소수점 숫자는 과학적 표기법으로 표현되는 실수이며 매우 크거나 작은 값을 나타낼 수 있습니다. float형 변수는 소수점 이하 유효숫자 6자리의 값을 저장할 수 있습니다. C언어에서는 부동소수점 숫자를 연산하고 저장하는 데 사용할 수 있습니다. 실수는 정수형과 달리 소수점 이하의 숫자를 표현할 수 있고 소수에 대해 4가지 산술 연산을 수행할 수 있습니다.

div와 스팬의 차이점은 무엇입니까? div와 스팬의 차이점은 무엇입니까? Nov 02, 2023 pm 02:29 PM

차이점은 다음과 같습니다. 1. div는 블록 수준 요소이고, 범위는 인라인 요소입니다. 2. div는 자동으로 한 줄을 차지하지만, 범위는 자동으로 줄 바꿈되지 않습니다. 3. div는 더 큰 구조와 레이아웃을 줄 바꿈하는 데 사용됩니다. 4. div는 다른 블록 수준 요소와 인라인 요소를 포함할 수 있고, 범위는 다른 인라인 요소를 포함할 수 있습니다.

div 상자 모델은 무엇입니까 div 상자 모델은 무엇입니까 Oct 09, 2023 pm 05:15 PM

div 상자 모델은 웹 페이지 레이아웃에 사용되는 모델입니다. 이 모델은 콘텐츠 영역, 패딩, 테두리 및 여백의 네 부분으로 구성됩니다. div 박스 모델의 장점은 웹 페이지의 레이아웃과 요소 사이의 간격을 쉽게 제어할 수 있다는 것입니다. 콘텐츠 영역의 크기, 내부 여백, 테두리 및 외부 여백을 조정하여 다양한 레이아웃 효과를 얻을 수 있습니다. 상자 모델은 또한 일부 속성을 제공하며 메서드는 CSS 및 JavaScript를 통해 상자의 스타일과 동작을 동적으로 변경할 수 있습니다.

See all articles