-14

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

我需要像这样的跨浏览器输出。 替代文字 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;
}

编辑：

我找到了对我有用的链接

  1. http://snook.ca/archives/html_and_css/getting_your_di

  2. http://www.dev-archive.net/articles/table-in-css.html

4

2 回答 2

4

“授人以鱼，你养他一天，教他钓鱼，你养他一辈子”

好的，我们开始吧。如果从安装Firefox开始，这样我就可以使用Firebug扩展。

因此，您显然无法控制仅由divs. 到现在为止还挺好。

我通过删除更改了您的 css 片段，因为 Firebug 显然向您展示了您的标记#ConferencesContainer中没有divid ......这解释了为什么和类似的选择什么都不选。ConferencesContainer#ConferencesContainer .ConferencesTitleContainer {

然后我删除了绝对定位，因为据我所知，这在 IE 中并不好用。顺便说一句，float: left如果你再使用，那么拥有是没有用的position: absolute

为了适应有时没有 pdf 下载链接的事实（因此div标记中没有），我将议程项目和 pdf 链接 div 浮动到左侧。我float在右侧制作了传记和网络广播 div，并欺骗了边距以将 div 切换回其预期位置。由于网络广播 div 位于标记的首位（相对于传记 div），因此需要利用边距。

当然，如果您将我给您的样式表应用于带有“孔”的稍微不同的标记，也就是说，由于没有相应的输出链接而缺少 div，那么它可能无法正常工作。

无论如何，我相信你现在有足够的能力自己尝试，祝你好运。

.ConferencesTitleContainer {
float:left;
padding:2px 0;
width:40%;
background: red;
}
.ConferencesPdfContainer {
float:left;
text-align:center;
width:20%;
background: yellow;
}
.ConferencesExtLinkContainer {
float:right;
margin-left: -20%;
margin-right: 20%;
text-align:center;
width:20%;
background: lime;
}
.ConferencesHtmlContainer {
float: right;
margin-left: 20%;
margin-right: -20%;
text-align:center;
width:20%;
background: pink;
}

替代文字
（来源：pakosz.fr）

在行动中看到它。

而且，您可能想阅读10 大 CSS 表格设计或10 个 CSS 表格示例以获得漂亮的样式。

PS：这里的编码器颜色有助于可视化 div。

于 2009-12-12T16:00:55.823 回答
3

我想，你必须玩一点。此外，您肯定需要一些图像和对 xhtml 代码的耐心，尤其是出色的 id 和类名。

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

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