CSS установить ширину, чтобы заполнить% оставшейся области

Question

Извините за слегка вздорное название. Я не мог думать, как описать это лучше.

Я пытаюсь внедрить гаджет участников Google Friend Connect на моем сайте (только что вошел в схему и хочу вставить его без значительного изменения, по крайней мере, для тестирования).

Моя проблема заключается в следующем:

У меня есть контейнер div, ширина которого составляет 90% от главной страницы (тела). Внутри этого я плаваю div вправо, устанавливая его ширину 300px и помещая в него гаджет Google. Я хотел бы, чтобы div занимал 95% пространства, оставшегося слева от div гаджета Google.

Я не знаю, возможно ли смешивать px и% с divs и widths.

Надеюсь, это имеет смысл.

Спасибо

Answer 1

Это так. Вы ищете полужидкий макет. Первоначально квест был священным Граалем реализации CSS ... Но как вы можете видеть по этой ссылке (они делают 3 столбца, 2 исправлены, но их легко изменить), эта проблема давно решена =)

Answer 2

Если вы предпочитаете избегать поплавков и исправлений, используйте гибкий макет.

.main {
  display: flex;
  width: 90%;
}
.col1 {
  flex-grow: 1;
}
.col2 {
  width: 300px;
  margin-left: 5%;
}

<div class="main">
  <div class="col1" style="background: #518cf3;">Left column</div>
  <div class="col2" style="background: #94d0bb;">Right column</div>
</div>

Примечание: Добавьте префиксы поставщика Flex, если это требуется для поддерживаемых браузеров .

Answer 3

Вам необходимо создать алгоритм с использованием jQuery или JS, который проверяет оставшееся пространство и динамически устанавливает ширину элемента «Остаток» для адаптивной сборки. Если сборка не отвечает, вы можете проверить и установить ширину элемента, выполнив простые математические вычисления.

Мы сталкивались с подобными проблемами при построении мультимедийной системы на основе жидкостной реагирующей сетки.

Answer 4

Я также провел быстрый эксперимент, посмотрев на множество потенциальных решений повсюду. То, что я пытался сделать, - это получить смесь жидкости и фиксированных строк и столбцов.

Вот что я закончил:

http://jsbin.com/hapelawake