Question

请参阅此http://jsbin.com/iveso的源代码。我无法更改xhtml代码中的任何内容。

我需要像这样的跨浏览器输出。 alt text http://easycaptures.com/fs/uploaded/445/5025516010.jpg

我们如何以更少的优势提供相同的外观并优化css

这是CSS

#ConferencesContainer {
overflow:hidden;
}
#ConferencesContainer img {
float:left;
padding:0 10px 10px 0;
}
#ConferencesContainer #ConferencesItemsContainer img {
float:none;
padding:0;
}
#ConferencesHeaderContainer {
font-size:1.1em;
font-weight:bold;
margin:10px 0;
overflow:hidden;
}
#ConferencesTitleHeaderContainer {
float:left;
width:40%;
}
#ConferencesPDFHeaderContainer {
float:left;
text-align:center;
width:20%;
}
#ConferencesExternalLinkHeaderContainer {
float:left;
text-align:center;
width:20%;
}
#ConferencesHtmlHeaderContainer {
float:left;
text-align:center;
width:20%;
}
.Conferencesnorth-america-2009ItemContainer {
border-bottom:1px solid #008999;
overflow:hidden;
padding:5px 0;
position:relative;
}
.Conferencesaustralia-and-asia-2008ItemContainer {
border-bottom:1px solid #008999;
overflow:hidden;
padding:5px 0;
position:relative;
}
.Conferencesinvestor-conference-2008ItemContainer {
border-bottom:1px solid #008999;
overflow:hidden;
padding:5px 0;
position:relative;
}
#ConferencesContainer .ConferencesTitleContainer {
float:left;
padding:2px 0;
width:40%;
}
#ConferencesContainer .ConferencesPdfContainer {
float:left;
left:40%;
position:absolute;
text-align:center;
width:20%;
}
#ConferencesContainer .ConferencesExtLinkContainer {
float:left;
left:60%;
position:absolute;
text-align:center;
width:20%;
}
#ConferencesContainer .ConferencesHtmlContainer {
float:left;
left:80%;
position:absolute;
text-align:center;
width:20%;
}
#ConferencesAcrobatWarningContainer {
float:left;
padding-top:20px;
}
.Conferencesaustralia-and-asia-2008ItemContainer #ConferencesasiaTitleContainer {
font-weight:bold;
}
.Conferencesaustralia-and-asia-2008ItemContainer #ConferencesaustraliaTitleContainer {
font-weight:bold;}

修改：

我找到了对我有用的链接

Answer 1

“给一个人一条鱼，你喂他一天，教他钓鱼，你喂他一辈子”

好的，我们走了。如果通过安装Firefox启动，以便我可以使用Firebug扩展名。

所以你显然无法控制仅由divs组成的标记。到目前为止一切都很好。

我删除了#ConferencesContainer删除了你的css片段，因为Firebug明显地告诉你标记中没有div标记ConferencesContainer ...这解释了为什么{ {1}}同样没有选择。

然后我删除了绝对定位，因为据我所知，这是与IE不相称的东西。顺便说一句，如果您使用#ConferencesContainer .ConferencesTitleContainer {

，则float: left无效

为了适应有时没有pdf下载链接（因此标记中没有position: absolute）的事实，我制作了议程项目，pdf链接divs浮动到左侧。我将传记和网络广播div div放到右边，并欺骗边缘将div转回到预期的位置。由于网络广播div在标记中排在第一位（关于传记div），因此必须欺骗边距。

当然，如果你应用样式表我给你一个稍微不同的带有“洞”的标记，也就是说缺少div，因为没有相应的输出链接然后它可能不起作用。

无论如何，我相信你现在已经足够自己试验，祝你好运。

float

_{（来源：pakosz.fr）}

See it in action.

并且，您可能希望阅读Top 10 CSS Table Designs或10 CSS Table Examples以获得漂亮的样式。

PS：编码器颜色可以帮助可视化div。

Answer 2

我想，你必须要玩一点。此外，你肯定需要一些图像和对xhtml代码的耐心，特别是伟大的id＆amp;班级名称。

以下是可以帮助您入门的内容：

.ConferencesTitleContainer, .ConferencesPdfContainer, .ConferencesExtLinkContainer, .ConferencesHtmlContainer, .ConferencesTitleHeaderContainer, .ConferencesPDFHeaderContainer, .ConferencesExternalLinkHeaderContainer, .ConferencesHtmlHeaderContainer {
float:left;
width:24%;
border-bottom:1px solid;
}
#ConferencesasiaTitleContainer, #ConferencesaustraliaTitleContainer {
width:96%;
font-weight:bold;
}

如何使用css来设置xhtml标记的样式，只使用像表格这样的div

2 个答案: