Что еще нельзя сделать в CSS?

Question

Некоторое время назад я пытался найти способ сделать это без использования таблицы:

<table>
  <tr><td rowspan="2">Left column</td></tr>
  <tr><td>Right Top</td><td>Right bottom</td></tr>
</table>

В конце концов я сдался и решил, что без таблиц обойтись невозможно (хорошо, CSS 3 мог бы, но ждать еще 5-10 лет нецелесообразно).

У кого-нибудь есть такие примеры? (Или даже лучше, вы можете показать мне, что я был неправ?)

Answer 1

Чтобы ответить на вопрос в названии, что является неловким, очень трудным или невозможным сделать:

• переменные и расчеты (выражение не считается, и переменные были бы полезны для таких вещей, как санация цвета)
• вертикальное центрирование
• установка размеров на "оставшееся пространство" (например, "*" в таблицах)
• эффективное смешивание относительных и абсолютных единиц (вышеизложенное решит большинство этих проблем)
• стилистические эффекты, такие как закругленные углы, исчезающий фон, тени
• управление пробелами в тексте
• стандартизированное субпиксельное округление (это не проблема CSS, а следствие среды)

Некоторые из этих вещей сочинены для будущего, которое уже будет справедливым.

Answer 2

Кто-то ответил на вопрос, был ли дизайн выполнимым. Но у меня есть пример того, что нельзя сделать с помощью CSS. По какой-то причине вам нужно явно указать cellspacing и cellpadding таблицы. Его нельзя установить с помощью css, хотя есть свойства margin и padding. Это то, что я подумал, что это невероятно раздражает, потому что я всегда хочу контролировать поля и отступы для таблиц с помощью css.

1007 * Е.Г. *

<h1> This table won't have it's margin or padding reset </h1>
<table style="padding: 0; margin: 0;">
    <tr><td>a</td><td>b</td></tr> 
</table>

<h1> This table will... </h1>
<table cellspacing="0" cellpadding="0">
    <tr><td>a</td><td>b</td></tr> 
</table>

Answer 3

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

Answer 4

То, чего мне никогда не удавалось достичь в CSS, - это вертикально центрированные изображения. Я всегда получаю что-то подобное (что я ненавижу)

<style>
  td.pic_frame {
    text-align:center;
    width:220px;
    height:220px;
    vertical-align:middle;
 } 
</style>
<table><tr><td class="pic_frame"><img ...></td></tr></table>

Я только что попробовал это, используя таблицы CSS, как предложено dylanfm

<style>
  div.pic_frame{
    display:table-cell;
    text-align:center;
    width:220px;
    height:220px;
    vertical-align:middle;
  }
</style>
<div class="pic_frame"><img ...></div>

Отлично работает во всех браузерах, кроме как вы уже догадались , IE7

(протестировано в Firefox, Safari, Opera, Chrome и IE7)

Answer 5

Существует множество других способов создания табличного макета. Есть даже таблицы CSS . На самом деле, нет никакой причины использовать таблицу для разметки. Когда-либо.

Что-то, что не может быть сделано в данный момент, является правильным text-align: justify; Дефис не работает должным образом, но с помощью мягких дефисов вы можете заставить его вести себя вполне соответствующим образом, я ожидаю.

Answer 6

Другое решение, использующее свойство position:

<style type="text/css">
    .outer {
        position: relative;
        background-color: #EEE;
    }
    .left-column {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: #F88;
    }
    .right-top {
        margin-left: 50%;
        background-color: #8F8;
    }
    .right-bottom {
        margin-left: 50%;
        background-color: #88F;
    }
</style>


<div class="outer">
    <div class="left-column">Left column</div>
    <div class="right-top">Right top</div>
    <div class="right-bottom">Right bottom</div>
</div>

Answer 7

<div style='float:left;width:200px;height:300px;'>Left column</div>
<div style='margin-left:200px;'>
    <div>Right top</div>
    <div>Right bottom</div>
</div>

Я думаю, вы хотите что-то подобное. Помните, способность css float удивительна. Это всего лишь пример.

Answer 8

Если вы напишите какое-нибудь приложение WPF (написание панелей XAML), вы захотите вывести в окно все найденные HTML и CSS ...

Answer 9

Это непонятный атрибут, но атрибут value тега элемента списка не имеет замены в CSS, даже если он устарел в XHTML 1.0 Strict и стандарт предписывает использовать вместо этого CSS. Итак, следующее недействительно:

<ol>
 <li>Item one</li>
 <li>Item two</li>
 <li value="4">Item four</li>
 <li>Item five</li>
</ol>

Это вызвало у меня большое горе, когда я размещал определенные юридические документы в Интернете, используя семантически значимый код.

Answer 10

Вы можете вертикально центрировать изображения с отрицательными полями. Используйте отрицательное поле, чтобы переместить «опорную точку» изображения в его центр. Затем поместите изображение относительно посередине.

Пример для изображения 800x800:

#centered
{
    position:absolute;
    top:50%;
    left:50%;
    height:800px;
    width:800px;
    margin: auto;
    margin-top:-400px;
    margin-left:-400px;
}