목차
浮动的<div>框为什么会显示成这个样子_html/css_WEB-ITnose
<!DOCTYPE html><html><head><style>div.one{ width:350px; border:solid 5px;padding:0px}div.two{ width:50px;border:solid 2px; float: left;}p{border:solid 5px;padding:0px}</style></head><body><div class="one"><p >你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是牛逼的任务你是逼的任务</p><div class="two"> 应该显示在one 框的左上部</div></div></body></html>로그인 후 복사
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
---------------------------
可是two 框 为什么显示在了 one 框 的外面了
回复讨论(解决方案)
“浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。”
----------------------------------------
这句话应该这样理解：如果浮动框上面紧邻的是一个非浮动框，则浮动框 只向左或向右移动，而不向上浮动。如果浮动框上面紧邻的是另一个浮动框，则向上浮动。
你的p标签隔在中间挡住了
我说明一下：先写一个简单的代码
<div> <div class="one"></div> <div class="two"></div></div>
로그인 후 복사
说明：
div是块级元素，默认占整宽。一般来说如果元素浮动，最好定义宽度，否则宽度按照内容变化。
1 如果one不是浮动，two浮动只能在one下方浮动。
2 如果one是浮动，two浮动的位置和宽度有关。two+one宽
子块浮动，父块收缩。。。如此而已。。。。。。
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
4 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?
3 몇 주 전
By DDD
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7315
9
7315
9
자바 튜토리얼
1625
14
1625
14
Cakephp 튜토리얼
1348
46
1348
46
라라벨 튜토리얼
1260
25
1260
25
PHP 튜토리얼
1207
29
1207
29
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?
Mar 04, 2025 pm 12:32 PM
공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?
HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?
Mar 17, 2025 pm 12:27 PM
HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?
웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?
Mar 04, 2025 pm 02:39 PM
웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?
HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?
Mar 17, 2025 pm 12:20 PM
HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?
html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?
Mar 12, 2025 pm 04:05 PM
html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?
