ホームページ > 記事 > ウェブフロントエンド > div左右レイアウト
div左右レイアウト
- 高洛峰オリジナル
- 2016-11-23 17:35:124566ブラウズ
<!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 の新機能の概要: 境界線と背景