2

我似乎在并排堆叠 3 个 div 时遇到了问题。我浏览了几个不同的页面，这些页面为我提供了如何执行此操作的代码和提示，但由于某种原因，结果并不正确。这是我在页面中使用的 div 代码，以及样式表中 div 的信息。希望有人可以帮助我解决我做错的事情。

我决定再做一次编辑，因为我真的没有提供足够的信息，我有 3 个并排的 div，但它们似乎粘在一起，一个是不同的，我希望它们均匀分布以与布局的其余部分齐平。我有一个网站链接，所以你可以看到我有什么我有什么

也很抱歉与帖子中 #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;
}
4

3 回答 3

0

看起来这是因为您浮动 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-21T01:44:25.037 回答
0

这是一个干净的工作代码（你的代码太乱了）。您可以将其复制粘贴到您的 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-21T01:46:22.870 回答
0

你可以使用：

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

然后删除所有的浮动。

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

于 2012-10-21T02:12:21.677 回答