如何使用 css 设计仅由 div 组成的 xhtml 标记（如表格）

Question

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

我需要像这样的跨浏览器输出。 替代文本 http://easycaptures.com/fs/uploaded/445/5025516010.jpg< /a>

我们如何用更少的资源提供相同的外观并优化 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

Answer 1

“授人以鱼，可喂一日；授人以鱼，可终身受用”

好吧，我们开始吧。如果首先安装 Firefox 以便我可以使用 Firebug 扩展。

因此，您显然无法控制仅由 div 组成的标记。到目前为止，一切都很好。

我通过删除 #ConferencesContainer 更改了您的 css 片段，因为 Firebug 显然表明您的标记中无论如何都没有带有 id ConferencesContainer 的 div ...这解释了为什么 #ConferencesContainer .ConferencesTitleContainer { 等不选择任何内容。

然后我删除了绝对定位，因为据我所知，这在 IE 中表现不佳。顺便说一句，如果您随后使用 position:absolute ，则 float: left 是没有用的。

为了适应有时没有 pdf 下载链接的事实（因此没有 div 在标记中），我将议程项目和 pdf 链接 div 浮动到左侧。我将传记和网络广播 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）}

查看实际操作。

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

PS：编码器颜色是为了帮助可视化 div。

Answer 2

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

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

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