CSS div问题

我似乎有一个问题并排堆叠3个div。我经历了几个不同的页面，给了我如何做到这一点的代码和技巧，但由于某种原因，它不能正确显示。以下是我在页面中使用的div代码以及样式表中div的信息。希望有人能帮助我解决我所做的错误。CSS div问题

我决定做另一次编辑，因为我真的没有提供足够的信息，我有3个并排的div，但它们似乎粘在一起，一个不同，我希望它们均匀地空间以适合与其余的布局。我有一个链接到网站，所以你可以看到我有什么what I have

同样对不起，关于在帖子＃t2中丢失的＃我在意外删除了它，当它在代码中发布。

<div id="testwrap"> 
    <div id="t1">left</div> 
    <div id="t3">right</div> 
    <div id="t2">middle</div> 
</div> 

#testwrap { 
width: 933px; 
margin-right: auto; 
margin-left: auto; 
} 

#t1 { 
width: 311px; 
margin-right: auto; 
margin-left: auto; 
background-color: #FFF; 
height: 220px; 
margin-top: 20px; 
margin-bottom: 20px; 
float: left; width:311px; 
padding: 10px; 
} 
#t2 { 
background-color: #FFF; 
height: 220px; 
width: auto; 
padding: 10px; 
margin-top: 20px; 
margin-right: auto; 
margin-bottom: 20px; 
margin-left: auto; 
} 
#t3 { 
background-color: #FFF; 
height: 220px; 
width: 311px; 
margin-right: auto; 
margin-left: auto; 
margin-top: 20px; 
margin-bottom: 20px; 
width:311px; 
float: right; width:311px; 
padding: 10px; 
}

来源

2012-10-21 Mumblz

t2是一个元素。尝试＃t2 –

我在写这篇文章时犯了一个错误，它在编码中实际上＃t2，在文章中改变了它并留下了我所做页面的链接，看看它看起来像什么 – Mumblz

他们似乎排好了对于我在Chrome，IE9，IE8和IE7 – brenjt

这是干净的工作代码（您的代码太乱了）。您可以将其粘贴到HTML文档中。只需改变div的背景颜色即可。

http://jsfiddle.net/K3FJe/

HTML

<div id="testwrap"> 
    <div id="t1">left</div> 
    <div id="t2">middle</div> 
    <div id="t3">right</div> 
</div>

CSS

#testwrap { 
    width: 933px; 
    height: 280px; 
    margin: 0 auto; 
    background: black; 
} 

#t1, #t2, #t3 { 
    height: 220px; 
    padding: 10px; 
    color: #FFF; 
    float: left; 
} 

#t1 { 
    width: 273px; 
    margin: 20px 6px 20px 12px; 
    background-color: red; 

} 

#t2 { 
    width: 279px; 
    margin: 20px 6px 20px 6px; 
    background-color: blue; 
} 

#t3 { 
    width: 273px; 
    margin: 20px 12px 20px 6px; 
    background-color: green; 
}

我与他们之间甚至空间更新它，我觉得这应该工作。

来源

2012-10-21 01:46:22 IAMTHESTIG

用你为间距给出的新值更改了代码，但最后一个框落到了底部，或者我应该说蓝色框。 – Mumblz

好了，所以我添加了你的代码，并得到了一部分固定现在我有蓝色框完全相同的问题哈哈继承人它看起来像现在一样.http：//www.gen2designs.com/index.html – Mumblz

我更新了代码，请再次检查。 – IAMTHESTIG

看起来像是因为你正在浮动t1和t3，并将它们从文档流中取出。如果你还浮动＃t2，并改变其宽度以匹配结果空间（而不是自动），它应该工作。

#t2 { 
    background-color: #000; 
    height: 220px; 
    width: 250px; 
    padding: 10px; 
    margin-top: 20px; 
    margin-right: auto; 
    margin-bottom: 20px; 
    margin-left: auto; 
    float:left; 
}

来源

2012-10-21 01:44:25 PRB

感谢PRB，他们实际上解决了它们全部在同一层面上的问题，现在我只需要弄清楚如何均匀地将它们分隔开以便与它们上面的内容框齐平 – Mumblz

你可以使用：

#testwrap { 
    display: table; 
    [...] 
} 
#t1, #t2, #t3 { 
    display : table-cell; 
    width: 271px; 
}

然后删除所有的花车。

这样所有的列将始终具有相同的高度。

来源

2012-10-21 02:12:21 omanna

回答

相关问题