2011-02-03 28 views
0

右のdivを下の代わりに上にするにはどうすればよいですか?右の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> 
<style type="text/css"> 
body 
{ 
    padding: 0; 
    margin: 0; 
} 
#all 
{ 
    width: 955px; 
    margin: 0 auto; 
    background: #F4FEC0; 
} 
#dleft 
{ 
    margin-right: 200px; 
} 
#dright 
{ 
    float: right; 
    width: 200px; 
    margin-left: 755px; 
} 
</style> 
</head> 

<body> 

<div id="all">  
    <div id="dleft"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et odio elit. Praesent ut sem nibh, non ultricies purus. Integer viverra dapibus nulla. Nulla quis quam mauris, et faucibus arcu. Integer quis est a libero lacinia tincidunt. Duis dignissim dui nec quam vehicula nec eleifend dolor scelerisque. Cras vehicula, mauris quis pretium gravida, justo tellus tincidunt nunc, faucibus euismod enim sapien at neque. Fusce quis elit ut elit commodo pulvinar id sit amet urna. Mauris sapien lacus, auctor eu posuere at, mattis in elit. Sed congue ultricies diam, sit amet placerat quam rutrum ac. Vivamus pellentesque tristique nisi, a consectetur sem dignissim in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc rhoncus dolor nibh. In ornare mattis lectus, id mattis felis iaculis vel. Maecenas quis tellus eu est luctus mattis eu id urna. Vestibulum eu elit eget magna malesuada adipiscing. Vestibulum sem neque, condimentum eget luctus vel, rhoncus vel tellus. Donec egestas quam id erat dignissim tempus. Cras volutpat erat ac enim fermentum eu convallis quam porttitor. Quisque ac tellus sit amet libero interdum sodales. 
    </div> 
    <div id="dright"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
</div> 

</body> 
</html> 

答えて

0

あなたがHTMLの一部の周りに移動する気にしない場合は、これは簡単な解決策です。

<div id="dright"><div id="dleft">の前に移動します。

#allを入力してください。overflow: autoを追加してください。clear the floatには、<div>の方が左側よりも高くなる場合があります。

3
#dleft 
{ 
    float:left; 
    width:755px; 
} 
#dright 
{ 
    float: left; 
    width: 200px; 

} 
1
#dright 
{ 
    position:absolute; 
    left:775px; 
    top:0; 
    width: 200px; 
} 
0

あなたdleft divがwidthセットを持っていないので、それのコンテナ全体を埋めるためにしようとします。 dleftwidthを設定します。コンテナの幅が955pxであることを確認してから、これは755px以下にするか、drightのCSSにposition:absolute; top:0;を設定します。 #drightから

margin-leftプロパティを削除します。

関連する問題