CSS div 问题

标签 css html web dreamweaver

我似乎在并排堆叠 3 个 div 时遇到问题。我浏览了几个不同的页面,这些页面为我提供了如何执行此操作的代码和提示,但由于某种原因,结果并不正确。这是我在我的页面中使用的 div 代码,以及来自样式表的 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;
}

最佳答案

这是一个干净的工作代码(你的代码太乱了)。您可以将其复制粘贴到您的 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;
}​

我更新了它们之间的空格,我认为这应该可行。

关于CSS div 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12994125/

相关文章:

html - 如何将图标,图片放在Jquery Mobile右侧的列表中

html - 为什么过渡不适用于绝对定位的图像?

html - CSS - 如何将样式应用于静态生成列表中的第一个元素

javascript - 如何使用所有元素颜色的变量制作文件

javascript - JQUERY : Confusion to find next element in a complex structure

javascript - 调整大小功能无法正常工作

css - 从 Internet Explorer 8 打印时,我需要为不透明度设置哪种 CSS 样式?

javascript - 使用 javascript 将数据从一个页面传递到另一个页面的现代简单方法是什么?

java - 如何从 Web 应用程序的 Java Servlet 发送推送通知?

html - 如何在网站中使用自定义字体