2011-02-03 101 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的移動,這是一個簡單的解決方案:

#dright,刪除margin-left財產。

在HTML中,將<div id="dright">移至<div id="dleft">之前。

若要#all,請添加overflow: auto - 如果您的權利<div>變得高於您的左側,則需要clear the float

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集,因此會盡量補全的它的容器。要麼爲dleft設置width,如果容器的寬度爲955px,則這應該不超過755px,或者在dright的CSS中包含position:absolute; top:0;

相關問題