遇到一些麻烦让两个div彼此相邻浮动

我知道这个问题已被一遍又一遍地回答，但我找不到适合我的东西。我认为这与缺乏显示有关：内容或边栏中的属性，但我不确定是什么。请看看我的代码，看看你能否发现我的错误。遇到一些麻烦让两个div彼此相邻浮动

我很抱歉问这个问题，我确定有一些明显的答案，但我还没有能够发现它。

在此先感谢

安迪

<html> 
<head> 
<title>Andy's test website</title> 

<style type="text/css"> 
html, body 
{ 
    margin:0px; 
    padding:0px; 
} 

p 
{ 
    margin:0px; 
    padding:0px; 
} 

#container 
{ 
    margin:0 auto; 
    background-color:white; 
    width:760px; 
    border:1px solid gray; 
} 
#header 
{ 
    line-height:130%; 
    border-bottom:1px solid gray; 
    width:760px; 
} 
#content 
{ 
    float: left; 
    width:500px; 
    margin-right:260px; 
} 
#sidebar 
{ 
    float: right; 
    width:260px; 
} 
#footer 
{ 
    clear:both; 
    width:760px; 
} 

</style> 

</head> 

<body> 
<div id="container"> 

    <div id="header"> 
    <h1>Hello World</h1> 
    </div> 

    <div id="content"> 

    <p> 
     "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
    </p> 

    </div> 

    <div id='sidebar'> 
    <p> 
     "Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     sed do eiusmod tempor incididunt ut labore et dolore 
     magna aliqua. Ut enim ad minim veniam," 
    </p> 
    </div> 

    <div id="footer"> 
    footer 
    </div> 
</div> 

</body> 
</html>

来源

2011-09-18 Andy

使用此CSS

#content 
    { 
    float: left; 
    width:480px; 
    margin-right:20px; 
    } 
    #sidebar 
    { 
    float: left; 
    width:260px; 
    }

两个要素应左浮动，第一个将有一个保证金的权利。

来源

2011-09-18 20:00:12

它很好用，你能解释为什么两个元素都应该向左浮动吗？以及你的代码中发生了什么，我的代码没有这样做，再次感谢你的回答。 – Andy

因为如果你浮动左边的两个，它们将彼此相邻，像正确的宽度（不大于父div的大小）并排。如果你有浮动t和浮动左边你可以得到你想要的结果，但我认为这很容易与我的解决方案 –

好，很酷，感谢您的帮助。 – Andy

问题在于您在#content上使用margin。在边距为260px的情况下，#content的外部宽度变为760px，这是父级#container的整个可用内部宽度。在页面流程中，您的#sidebar在#content之下，因为没有足够的空间让两个元素并排存在。

降margin-right从#content和事情应该显示你想要的。

请记住，这个配置很紧，当你引入改变的任何#content或#sidebar（包括border，padding和margin。念叨CSS box model将帮助您最大宽度任何CSS属性将再次突破更好地理解发生了什么

来源

2011-09-18 20:15:27

遇到一些麻烦让两个div彼此相邻浮动

回答

相关问题