В вашем файле типографские кавычки - вместо них нужно использовать только '
и "
(прямые кавычки) для строк кавычек .
Что, если я сказал Вам Вы не сделал потребность очищающийся блок?
.clear-block:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clear-block {
display: inline-block;
}
<div id="wrapper" class="clear-block">
<div style="float:right">
Your content here
</div>
<div style="float:left">
More content here
</div>
</div>
При отображении табличных данных все еще имеет больше смысла использовать таблицы затем многие пущенные в ход отделения. Используйте инструменты, которые Вы имеете мудро - вслепую не используют CSS, где таблицы являются наилучшим вариантом.
Нисколько. Существует много других преимуществ для избегания использования таблиц.
Я понимаю что цель движения
<div>
теги от<table>
имеет смысл, так как это является более семантическим.
На самом деле это - точно противоположное: перемещение от <table>
кому: <div>
делает Ваш HTML менее семантическим. На самом деле, смысл <div>
(и <span>
) элементы не должны иметь никакой семантики!
Это всегда убирает галочку во мне, когда я вижу лес <div>
s описанный как "семантический HTML". Нет, это не! Это *ООН - *semantic HTML! Особенно, если это содержит много из <div class='float-left'>
, <div id='bottom'>
и мои любимые <div class='paragraph'>
и <span class='emphasis'>
.
Не понимайте меня превратно, с помощью несемантического <div>
s, конечно, лучше, чем использование семантического несправедливостью <table>
s, но еще лучше должен был бы использовать семантически корректные элементы – хотя во многих случаях проблема состоит в том, что HTML не предлагает никому. В Вашем отрывке, например, Вы используете <address>
элемент, но согласно спецификации, этот элемент не предназначен для повышения адресов! Это только для повышения адреса автора страницы – IOW, это совершенно бесполезно.
Пример, который Вы отправили, пропускает много контекста, таким образом, трудно сказать, но на самом деле похоже, что Вы могли бы хотеть отобразить или табличные или иерархические данные, в этом случае <table>
s или <ul>
s мог бы быть лучшим выбором.
Полностью не связанный с Вашим вопросом: Вы могли бы хотеть смотреть на мангольд и микроформаты XOXO.
Я лично использую взлом clearfix для своих потребностей очистки.
/* Clearfix */
#content:after,
.box:after {
content:'.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#content,
.box {
zoom: 1; /* IE */
}
Уведомление I просто запятая разделяет селекторы вместо того, чтобы добавить clearfix
класс ко всему. Это работает действительно хорошо. Единственная проблема состоит в том что zoom
свойство является конкретным IE и не проверяет, но нет никаких побочных эффектов, любят может иногда быть с другими свойствами, как overflow: auto
.
Я использовал это в профессиональных веб-сайтах в течение 5 лет без проблем.
Поскольку ответ annakata показывает, Вам не нужны те, которые очищают блоки. Но кроме этого, одно преимущество для предотвращения таблиц состоит в том, что страница может прогрессивно представляться. Таблица может только быть представлена, когда вся таблица, включая все ее содержание, была проанализирована, который может требовать времени, если у Вас есть большая страница и медленное соединение. отделения могут быть сразу представлены, что означает, что Вы смогли представлять что-то применимое пользователю намного раньше, чем с таблицами.
Конечно, это - просто миленькое бонусное преимущество, это не и не должно быть причиной избежать таблиц (для нетабличных данных)