Question

我试图让两个div并排坐下。在我的计算机上，在Safari和Firefox中，它显示正确。但是，在我的客户端计算机上（也使用Safari），它们是重叠的。

这是我的CSS：

#content
{
    clear: left;
    float: left;
    width: 715px;
    padding:0;
    margin: 41px 0 0 152px;
    display: inline;
}
#aside
{
    min-height: 850px;
    float: right;
    width: 280px;
    padding: 50px 40px 0 40px;
    margin: 0px 150px 0 65px;
    display: inline;
    position:absolute;
}

我遗漏了什么或编码错了吗？我不是一个Web开发人员，但他的任务是创建一个相当简单的页面。

提前致谢。

Answer 1

如果你想要一些简单明了的事情（假设#content和#aside是两个同胞div）......

<div id="content"></div><div id="aside"></div>

#content, #aside {
    float: left;
}

#content {
    background: red;
    width: 150px;
    height: 150px;
}

#aside {
    background: orange;
    width: 280px;
    height: 150px;
}

这是一个Fiddle来演示

注意：这是一个简单的解决方案，可能不是您需要的最佳解决方案。我建议对CSS显示和位置属性进行一些研究。

Answer 2

嘿，只需更改display属性即可显示：inline-block。如果你想让div并排坐着，你不需要浮动任何div。

#content
{
    width: 715px;
    padding:0;
    margin: 41px 0 0 152px;
    display: inline-block;
}
#aside
{
    min-height: 850px;
    width: 280px;
    padding: 50px 40px 0 40px;
    margin: 0px 150px 0 65px;
    display: inline-block;
    position:absolute;
}

显示：内联 它不会考虑任何div的宽度或高度。当我们设置display：inline时，它就像是一个＆＃34; span＆＃34;不考虑宽度或高度。

显示：内联块 它将考虑任何div的宽度或高度。当我们设置display：inline-block时，它将是内联的，它将考虑div的宽度和高度。

Divs并排坐在某些浏览器上而不是其他浏览器上

2 个答案: