-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

「人に魚を与えれば、その人を一日養い、釣り方を教えれば、一生養うことができる」

では、行きましょう。Firebug拡張機能を使用できるように、Firefoxをインストールして開始した場合。

したがって、 のみで構成されているマークアップを制御できないようですdivs。ここまでは順調ですね。

Firebug は明らかにマークアップに id#ConferencesContainerがないことを示しているため、削除して css のフラグメントを変更しました...これは、なぜ何も選択しないのかを説明しています。divConferencesContainer#ConferencesContainer .ConferencesTitleContainer {

次に、思い出す限り、これは IE ではうまく機能しないため、絶対配置を削除しました。ちなみに、持っていてfloat: leftもダメです。position: absolute

PDF ダウンロード リンクがない場合がある (したがってdivマークアップにない) という事実に対応するために、議題項目と PDF リンクの div を左にフロートさせました。そして、伝記と Web キャスト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 )

実際に見てください。

また、きれいなスタイリングについては、Top 10 CSS Table Designsまたは10 CSS Table Examplesを参照してください。

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 に答える