Каково преимущество дизайна без таблицы, если Вам нужны очищающиеся блоки везде?

В вашем файле типографские кавычки - вместо них нужно использовать только ' и " (прямые кавычки) для строк кавычек .

9
задан Stanislav Kralin 13 June 2017 в 21:52
поделиться

6 ответов

Что, если я сказал Вам Вы не сделал потребность очищающийся блок?

.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>

JSFiddle

32
ответ дан 4 December 2019 в 06:00
поделиться

При отображении табличных данных все еще имеет больше смысла использовать таблицы затем многие пущенные в ход отделения. Используйте инструменты, которые Вы имеете мудро - вслепую не используют CSS, где таблицы являются наилучшим вариантом.

11
ответ дан 4 December 2019 в 06:00
поделиться
1
ответ дан 4 December 2019 в 06:00
поделиться

Я понимаю что цель движения <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.

8
ответ дан 4 December 2019 в 06:00
поделиться

Я лично использую взлом 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 лет без проблем.

1
ответ дан 4 December 2019 в 06:00
поделиться

Поскольку ответ annakata показывает, Вам не нужны те, которые очищают блоки. Но кроме этого, одно преимущество для предотвращения таблиц состоит в том, что страница может прогрессивно представляться. Таблица может только быть представлена, когда вся таблица, включая все ее содержание, была проанализирована, который может требовать времени, если у Вас есть большая страница и медленное соединение. отделения могут быть сразу представлены, что означает, что Вы смогли представлять что-то применимое пользователю намного раньше, чем с таблицами.

Конечно, это - просто миленькое бонусное преимущество, это не и не должно быть причиной избежать таблиц (для нетабличных данных)

0
ответ дан 4 December 2019 в 06:00
поделиться