Я использую изменчивый макет новой темы, над которой я работаю для своего блога. Я часто пишу о коде и включаю блоки <pre> в сообщения. Столбец float: left для области содержимого имеет значение max-width, поэтому столбец останавливается на определенной максимальной ширине и также может быть уменьшен:
+----------+ +------+
| text | | text |
| | | |
| | | |
| | | |
| | | |
| | | |
+----------+ +------+
max shrunk
Я хочу, чтобы элементы <pre> были шире, чем текстовый столбец, чтобы я мог разместить 80-символьный код без горизонтальных полос прокрутки. Но я хочу, чтобы элементы <pre> были переполнены из области содержимого, не влияя на ее текучесть:
+----------+ +------+
| text | | text |
| | | |
+----------+--+ +------+------+
| code | | code |
+----------+--+ +------+------+
| | | |
+----------+ +------+
max shrunk
Но max-width перестает быть плавным, когда я вставляю туда нависающий <pre>: ширина столбца остается равной указанному max-width, даже когда я уменьшаю браузер выше этой ширины.
Я воспроизвел проблему с помощью этого сценария минимума:
<code><div style="float: left; max-width: 460px; border: 1px solid red">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<pre style="max-width: 700px; border: 1px solid blue">
function foo() {
// Lorem ipsum dolor sit amet, consectetur adipisicing elit
}
Lorem ipsum dolor sit amet, специалист по адептизингу elit
Я заметил, что выполнение любого из следующих действий возвращает текучесть:
- Удалить
<pre> (дох ...)
- Удалить
float: left
Обходной путь, который я использую в настоящее время, заключается в вставке элементов <pre> в «разрывы» в столбце записей, чтобы ширины сегментов записей и сегментов <pre> управлялись исключительно взаимно:
+----------+ +------+
| text | | text |
+----------+ +------+
+-------------+ +-------------+
| code | | code |
+-------------+ +-------------+
+----------+ +------+
+----------+ +------+
max shrunk
Но это заставляет меня вставлять дополнительные закрывающие и открывающие элементы <div> в разметку поста, которые я предпочел бы сохранить семантически нетронутыми.
Правда, я не совсем понимаю, как блочная модель работает с плавающими объектами с переполненным содержимым, поэтому я не понимаю, почему комбинация float: left на контейнере и <pre> внутри него наносит вред max-width контейнера.
Я наблюдаю ту же проблему в Firefox / Chrome / Safari / Opera. IE6 (сумасшедший) кажется счастливым все время.
Это также не зависит от режима причуда / стандартов.
Обновление
Я провел дополнительное тестирование, чтобы заметить, что max-width, кажется, игнорируется, когда элемент имеет float: left. Я взглянул на главу о коробочной модели W3C, но не смог сразу увидеть явное упоминание этого поведения. Есть указатели?