оломка http://sontag.ca/TheChallenge/tiles.gif
(источник:sontag.ca)

Часть I

Этот макет может быть сделан просто с 2 HTML-таблицами, одна вложена в другую, или даже с одной таблицей.

Это также может быть сделано с помощью CSS, хотя это может включатьнемного больше думать.

Возможно, это не макет реального мира, но я видел похожие страницы. Считайте это загадкой; упражнение, чтобы улучшить ваши навыки CSS.

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

Часть I излагает, какСоревнование Пришел что бы быть. Надеюсь вам нравится.

Часть IIРешение. Вы можете быть удивлены.

Часть II

Я был поражен тем, как быстро действительно хорошие ответы появились простоминут после того как я написал. Это был унизительный опыт. У меня нет желания соревноваться с вами во временных испытаниях.

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

Поэтому я добавил 3 новых правила (помните, одно из правил заключается в том, что эти правила могут быть изменены). Это раздражало некоторых людей. Тогда я добавил несколько красочных объяснений того, почему правила были изменены. Я думаю, что это раздражало их еще больше.

Наш сад должен иметь забор вокруг него; что-то, что могло бы отделить его от того мрачного окружения, в котором оно может оказаться; и не слишком дорого, но легко содержать в чистоте. Итак, я хочу 1 пиксель черной рамкой вокруг садаЖители каждого садового участка (персонажи) должны быть либо черными, либо белыми, в зависимости от того, кто из них показывает себя лучше в своем саду. Также они все скорописного происхождения. Там нет курсива среди них. ;-)Сад можно перемещать, то есть я могу иметь этот сад где угодно на странице (без абсолютного позиционирования).

Вот как должен выглядеть окончательный результат (цвет фона необязательный):

альтернативный текст http://sontag.ca/gif/garden.gif

Приношу свои извинения за капризные и последние изменения правила. Я ошибся. Жители каждого садового участка - ремесленники, специалисты ручной работы. Они являются потомкамискоропись семьяи обязаны своим чувством стилякурсив.

Сад должен быть перемещен, потому что оба вида садов (стол и CSS) должнысосуществовать на той же странице. Я могу ошибаться, если скажу, чтоposition:absolute правила не допускаются. Если вы можете заставить их работать в этом контексте, тогда у вас будет больше возможностей. Они, безусловно, будут приняты.

Я попросил забор вокруг участка, потому что каждый тип сада будет высажен в сельской местности на оранжевом фоне, очень похожем на цвет некоторых цветов, которые мы выращиваем.

Сейчас я живу в Голландии, и сезон тюльпанов быстро приближается. Если вы полетите над Голландией в течение следующих нескольких недель, и это ясный день (довольно редкий здесь), пейзаж внизу будет выглядеть довольно похожим на это глупое упражнение.

Я не в восторге от апельсина, но я люблю голландцев и восхищаюсь ими, поэтому у нас оранжевый фон, дань уважения моей принимающей стране. :-)

Часть III

Я отправил Тедаответ таблицы из The Challenge ниже вместе с этим изображением

альтернативный текст http://sontag.ca/gif/garden2.gif

потому что обитатели могут быть легко добавлены к участкам сада, не касаясь правил CSS - все автоматически центрируется.

Вы можете сделать это с CSS? Можете ли вы срубить самое сильное дерево в лесу с ... сельдью?

ОбновитьОтвет Чарли здесь.