div 왼쪽 및 오른쪽 레이아웃
- 高洛峰원래의
- 2016-11-23 17:35:124637검색
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 左侧 -->
<div style="width: 240px;float:left;height: 300px;background:#666; ">
<button type="button" onclick="javascript:alert('test')">右侧按钮1</button>
</div>
<!-- 右侧 -->
<div style="width:100%;float:right; margin-left:-250px;">
<div style="margin-left:250px; height:300px;background:#666;">
</div>
</div>
</body>
</html>
이 방법은 왼쪽과 오른쪽 레이아웃을 정상적으로 구현할 수 있지만, 플로팅 오버레이 방식으로 인해 왼쪽 div의 버튼을 클릭할 수 없다는 문제가 있습니다.
해결책: 부동 요소에 위치 속성(예: 상대, 절대 등)을 추가합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 左侧 -->
<div style="width: 240px;float:left;height: 300px;background:#666; position: relative;">
<button type="button" onclick="javascript:alert('test')">右侧按钮1</button>
</div>
<!-- 右侧 -->
<div style="width:100%;float:right; margin-left:-250px;">
<div style="margin-left:250px; height:300px;background:#666;">
</div>
</div>
</body>
</html>성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3의 새로운 기능 요약: 테두리와 배경다음 기사：CSS3의 새로운 기능 요약: 테두리와 배경