Сохраняйте одинаковую высоту между фонами пары терминов в табличном списке определений - PullRequest
Новая
       10

Сохраняйте одинаковую высоту между фонами пары терминов в табличном списке определений

3 голосов
/ 01 июня 2010

Я хочу отформатировать список определений в HTML, как если бы это была таблица с th в столбце и td в другом, с фоном, чередующимся для каждой строки (хотя фон для dt и другой для dd также подходит для проблемы), поэтому у меня есть этот CSS: 

dl {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.6em;
    overflow: hidden;
    width: 200px;;
    }
dl dt {
    font-weight: bold;
    float: left;
    clear: left;
    padding-right: 1%;
    width: 48%;
    }

dl dt:nth-of-type(odd),
dl dd:nth-of-type(odd) {
        background-color: #EEE;
    }
dl dt:nth-of-type(even),
dl dd:nth-of-type(even) {
        background-color: #DDD;    
    }
dl dd {
    float: left;
    width: 50%;
    padding-left: 1%;
    margin-left: 0;
    }

Пример HTML: 

<dl>
  <dt>Key 1</dt>
    <dd>Value 1</dd>
  <dt>Very very very long key 2</dt>
    <dd>Value 2</dd>
  <dt>Key 3</dt>
    <dd>Value 3 with<br /> line breaks</dd>
  <dt>Key 4</dt>
    <dd>Value 4</dd>
</dl>

Проблема в том, что из-за возможного различия в высоте в списке появляются «дыры» без фона:

Есть ли способ это исправить?

Ответы [ 4 ]

3 голосов
/ 01 июня 2010

Это работает во всех браузерах

(правка * Alohci - я не копирую тебя, клянусь. Просто видел твой ответ после публикации) 

<style type="text/css">
dl {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.6em;
    overflow: hidden;
    width: 200px;
}
dl dt {
    font-weight: bold;
    float: left;
    clear: left;
    width: 100px;
    margin-right:-100px;
    padding-right:100px;
}
dl dt, dl dd {
    background-color: #DDD;
}
dl dt.odd, dl dd.odd {
    background-color: #EEE;
}

dl dd {
    float: left;
    width: 100px;
    margin-left: 0;
    padding-left:100px;
    margin-left :-100px
}

span {
    position:relative;
    z-index:10;
}

</style>

<dl>
  <dt class="odd"><span>Key 1</span></dt>
  <dd class="odd"><span>Value 1</span></dd>
  <dt><span>Very very very long key 2</span>
  </dt>
  <dd><span>Value 2</span></dd>
  <dt class="odd"><span>Key 3</span></dt>
  <dd class="odd"><span>Value 3 with<br /> line breaks</span></dd>
  <dt><span>Key 4</span></dt>
  <dd><span>Value 4</span></dd>
</dl>
0 голосов
/ 01 июня 2010

Возможно, избавиться от дырок можно при условии, что вы можете обернуть содержимое всех dt и dd в span, чтобы цвета переднего плана как dt, так и dd может накладывать цвета фона каждого.Однако обратите внимание, что IE до IE9 не поддерживает :nth-of-type, поэтому это не будет работать в современных браузерах IE.Вам нужно будет добавить чередующиеся классы, чтобы обойти это.С этими оговорками попробуйте что-то вроде этого: 

dl {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.6em;
    overflow: hidden;
    width: 300px;
    margin-right:-100px;
    }
dl dt {
    font-weight: bold;
    float: left;
    clear: left;
    padding-right: 34%;
    width: 32%;
    }

dl dt:nth-of-type(odd),
dl dd:nth-of-type(odd)  {
        background-color: #EEE;
    }
dl dt:nth-of-type(even),
dl dd:nth-of-type(even)  {
        background-color: #DDD;    
    }

dl dd {
    float: left;
    width: 66%;
    padding-left: 0%;
    margin-left: -66%;
    }

dl dt span {
    position:relative;
    z-index:1;
    display:block;
    }

dl dd span {
    margin-left: 50%;
    display:block;
    }

<dl>
  <dt><span>Key 1</span></dt>
    <dd><span>Value 1</span></dd>
  <dt><span>Very very very long key 2</span></dt>
    <dd><span>Value 2</span></dd>
  <dt><span>Key 3</span></dt>
    <dd><span>Value 3 with<br /> line breaks</span></dd>
  <dt><span>Key 4</span></dt>
    <dd><span>Value 4</span></dd>
</dl>
0 голосов
/ 01 июня 2010

  • display: table-cell; не будет работать, так как нет контейнера для display: table-row; (и, конечно, поддержка IE довольно ... отсутствует)

  • display: inline-block; позволяет выравнивать содержимое по вертикали, но фоны по-прежнему имеют высоту содержимого: высокий или нет.

  • Если вы точно знаете, что является самым высоким элементом, вы можете использовать min-height

  • Если вы точно знаете, что каждый dl будет выше своего dd (или наоборот), то могут быть решения (более короткие элементы плавают, в то время как остальные имеют огромный запас, создавая, таким образом, 2 столбца)

  • В противном случае, прогрессивное улучшение с JS - это путь: по умолчанию без JS ваш список имеет один цвет фона, а с помощью JS вы можете получить высоту каждого элемента и zebrify все.

0 голосов
/ 01 июня 2010

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

Возможно, вам удастся просто установить цвет фона DL либо на цвет левого / правого столбца. Это может работать в этой ситуации.

...