Как использовать CSS в стиле xhtml разметки, сделанные только из divs, как таблица

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;} 

Edit:

я нашел ссылки, которые полезны для меня

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.

Таким образом, вы, по-видимому, не имеете контроля над разметкой, которая состоит только из divs. Все идет нормально.

Я изменил фрагмент вашего CSS, удаляя #ConferencesContainer, как Firebug, очевидно, показывает, что нет div с идентификатором ConferencesContainer в разметке все равно ... что объясняет, почему #ConferencesContainer .ConferencesTitleContainer { и так выберите ничего.

Тогда я удалил абсолютное позиционирование, потому что, насколько я помню, это то, что не очень хорошо играет с IE. Кстати, имея float: left бесполезно, если вы затем использовать position: absolute

Чтобы учесть тот факт, что иногда не существует никакой связи PDF скачать (следовательно, нет div в разметке), я сделал пункт повестки дня и PDF ссылка дива всплывает слева , И я сделал биографию и веб-трансляции divs float вправо и обманул поля, чтобы переключить divs обратно в их предполагаемое положение. Обманывание полей было необходимо, так как веб-трансляция сначала включалась в разметку (в отношении биографического 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; 
} 

alt text http://gregory.pakosz.fr/stackoverflow/homework.png

See it in action.

И, вы можете прочитать Top 10 CSS Table Designs или 10 CSS Table Examples для красивой укладки.

PS: цвета кодера здесь, чтобы помочь визуализировать div.