Установить ширину элемента в общую ширину братьев и сестер? - PullRequest
Новая
       27

Установить ширину элемента в общую ширину братьев и сестер?

2 голосов
/ 13 июля 2011

Три элемента находятся внутри контейнера для жидкости в следующей конфигурации: 

+-----------------+
| +-----+ +-----+ |
| |  A  | |  B  | |
| +-----+ +-----+ |
| +-------------+ |
| |      C      | |
| +-------------+ |
+-----------------+

Ширина элементов A и B составляет 50%. Ширина элемента C составляет 100%. Вы можете увидеть живой пример здесь .

Правые края строк не выравниваются, когда ширина контейнера нечетное число пикселей, из-за округления при вычислении ширины элементов A и B. Вы можете наблюдать смещение и выравнивание краев при изменении размера кадра , Эффект усиливается, когда в верхнем ряду содержится более двух элементов, скажем, ten .

Вместо этого я хотел бы, чтобы ширина элемента C была равна объединенной фактической ширине элементов A и B, а не объединенной процентной ширине. Это возможно без использования JavaScript или обращения к таблице?

1 Ответ

2 голосов
/ 13 июля 2011

Одним из решений было бы сделать, чтобы первый элемент плавал влево, придавая ему желаемую ширину.Правый не будет плавать, и будет иметь ширину по умолчанию, позволяя ему растягиваться, заполняя пространство слева.Посмотрите модификацию вашего примера, чтобы узнать, как это может работать: http://jsfiddle.net/QDVeD/12/. Основы можно суммировать с: 

#left {
  float: left;
  width: 50%;
  height: 50px;
}
#right {
  height: 50px;
}

Это не будет масштабироваться так, как вам может понадобиться для большего количества предметов, чемдва, хотя.Последний элемент обычно будет немного длиннее остальных: http://jsfiddle.net/QDVeD/18/.

...