1つしか浮動していない場合、DIVの重複を避けてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
<!-- 
body { 
background-color: #FFFFFF; 
} 

#side { 
width: 250px; 
float: left; 
height: 400px; 
background: #CCC; 
} 

#main { 
width: 800px; 
margin: 0 auto; 
height: 600px; 
background: #000; 
} 
--> 
</style> 
</head> 

<body> 
<div id="side"></div> 
<div id="main"></div> 
</body> 
</html>

非常に基本的な例です。ブラウザウィンドウのサイズを変更すると、＃side要素が十分に小さくなると#mainがオーバーラップします。このレイアウトを維持するにはどうすればよいですか？ブラウザが小さくなるにつれ、#mainが残っている左端の要素として#side stayを保有していますか？1つしか浮動していない場合、DIVの重複を避けてください。

出典

2011-12-27 user985952

このようなものはありますか？ http://jsfiddle.net/WaDp6/ – Virendra

これは私がもともと試したことですが、次に#main要素はもはや真ん中の@フルサイズのブラウザの幅にはなく、それは側面の左側に浮いています – user985952

これはあなたが欲しいものですか？

<style type="text/css"> 
<!-- 
body { 
background-color: #FFFFFF; 
width:1100px; 
} 

#side { 
width: 250px; 
float: left; 
height: 400px; 
background: #CCC; 
} 

#main { 
width: 800px; 
float:left; 
margin: 0 auto; 
height: 600px; 
background: #000; 
} 
--> 
</style>

出典

2011-12-27 20:29:45

これはもともとのものですしようとしましたが、#main要素はもはや真ん中の@フルサイズのブラウザの幅にはなくなりました。 – user985952

の左側に浮いています。サイズ変更に関するjquery/javascriptを使用する必要があります –

1つしか浮動していない場合、DIVの重複を避けてください。

答えて

関連する問題