我试图将两个 div 并排排列在一起。我设法破解了 Firefox 和 chrome 的 CSS，但在使用 Internet Explorer 时遇到了问题。我看过这里，谷歌发现了一些但仍然有问题。
这是网站
http://colmandesigns.123abc.co.nz/dev/brittens/index.html
这是我的CSS
任何帮助都会很棒
谢谢
2991 次
1 回答
0
您的问题与您分隔元素的方式有关。要使用此结构对齐元素，您必须删除所有将锚点与图像分开的 <br>标签（在“staffimages”内）并使用 CSS 边距。
<div class="staffimages">
<a href="#">
<img src="images/staff.jpg" width="50" height="50" alt="Johnny" border="0">
</a>
<br> -- 删除这个
<br> -- 也删除这个（等等）
另外，我建议您不要使用特定于浏览器的 CSS hack，除非没有其他方法可以解决问题。
您可以在下面看到与您的 HTML 文件一起使用的 CSS 片段。
@charset "utf-8";
/* CSS 文档 */
正文 {边距：0 自动；}
.container {margin:0 auto; 宽度：1000px；高度：950 像素；背景图像：url（图像/container.png）；}
＃返回 {
位置：绝对；
左：0px；
顶部：16px；
宽度：700 像素；
右：700px；
高度：126px；
z 指数：-1；
背景图像：url（图像/bgbg.png）；
}
/* 标题 */
.header {宽度：982px; 高度：370px；左边距：9px；背景图像：网址（图像/header.jpg）；}
.navibg {背景图像：url（图像/navibg.png）；宽度：983px；高度：56 像素；}
.logo {margin-top:-40px;}
/* 内容标题 */
#欢迎{宽度：89px; 高度：22px；填充左：50px；填充顶部：30px；向左飘浮;}
#services {宽度：89px; 高度：22px；左边距：-90px；填充顶部：250px；向左飘浮;}
#contactus {宽度：89px; 高度：22px；填充左：50px；填充顶部：30px；向左飘浮;}
#makinglifeeasy {宽度：89px; 高度：22px；填充左：30px；填充顶部：30px；向左飘浮;}
.分隔符{宽度：300px; 浮动：对；填充顶部：30px；填充右：90px;}
#team {位置：相对；边距顶部：30px；高度：19px；宽度：78px；浮动：对；右边距：-105px；}
/* 导航 */
.navi {浮动：右；填充右：50px；填充顶部：3px；}
/* 内容 */
.welcomecolumn {宽度：500px; 高度：自动；向左飘浮; 填充左：6px；填充顶部：5px；字体系列：Verdana、Arial、Helvetica、无衬线；字体大小：11px；文本对齐：对齐；颜色：#505050; 行高：150%；}
.servicecolumn {宽度：500px; 高度：自动；向左飘浮; 填充左：6px；填充顶部：5px；字体系列：Verdana、Arial、Helvetica、无衬线；字体大小：11px；文本对齐：对齐；颜色：#505050; 行高：150%；}
.list1 {浮动：左；左边距：-20px;}
.list2 {浮动：右；填充右：200px;}
/* 页脚 */
.footer {背景图片：url（图片/footer.png）；宽度：982px；高度：65px；左边距：9px；边距顶部：460px；颜色：#505050}
.footernavi {字体大小：9px; 字体系列：Verdana、Arial、Helvetica、无衬线；浮动：对；填充右：60px；填充顶部：27px；}
.footernavidetails {字体大小：10px; 字体系列：Verdana、Arial、Helvetica、无衬线；向左飘浮; 填充左：308px；填充顶部：27px；颜色：#FFFFFF；}
.footertext {padding-left:40px; 字体大小：10px；字体系列：Verdana、Arial、Helvetica、无衬线；填充顶部：110px；填充底部：5px；颜色：#aeaeae; 文本对齐：中心}
/* 团队 */
.staffimages {
高度：自动；
向左飘浮;
左边距：12px；
边距顶部：15px；
}
.staffimages 一个{
显示：内联块；
边距底部：20px；
}
.stafftext1，.stafftext2，.stafftext3，.stafftext4，.stafftext5 {
宽度：150px；
向左飘浮;
左边距：80px；
颜色：#505050;
字体系列：Verdana、Arial、Helvetica、无衬线；
字体大小：10px；
文本对齐：对齐；
位置：绝对；
}
.stafftext1 {
顶部：30px；
}
.stafftext2 {
顶部：100px；
}
.stafftext3 {
顶部：170px；
}
.stafftext4 {
顶部：242px；
}
.stafftext5 {
顶部：311px；
}
/* 阅读更多 */
#readmore，#readmore2，#readmore3，#readmore4，#readmore5 {
宽度：100px；
高度：自动；
浮动：对；
位置：绝对；
左边距：80px；
}
＃阅读更多 {
顶部：66px；
}
#readmore2 {
顶部：135px；
}
#readmore3 {
顶部：204 像素；
}
#readmore4 {
顶部：275 像素；
}
#readmore5 {
顶部：345 像素；
}
。联系方式
{字体系列：Verdana，Arial，Helvetica，无衬线；字体大小：12px；宽度：400px；填充左：8px；行高：40%；颜色：#626262}
.main {颜色：#626262}
/* 谷歌 */
。谷歌 {
宽度：300 像素；
高度：305px；
向左飘浮;
左边距：8px；
边距顶部：12px；
边距底部：20px；}
/* 链接 */
a.colman：链接{颜色：#aeaeae；text-decoration:none} /* 未访问的链接 */
a.colman:visited { 颜色:#aeaeae; text-decoration:none} /* 访问过的链接 */
a.colman：悬停{颜色：#0c3976; text-decoration:none} /* 鼠标悬停在链接上 */
a.colman:active { 颜色:#aeaeae; text-decoration:none} /* 选中的链接 */
a.footerlinks:link { color:#FFFFFF;} /* 未访问的链接 */
a.footerlinks:visited { color:#FFFFFF;} /* 访问过的链接 */
a.footerlinks:hover {color:#FFFFFF;} /* 鼠标悬停在链接上 */
a.footerlines:active { color:#FFFFFF;} /* 选中的链接 */
于 2012-08-06T09:38:01.273 回答