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

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

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

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

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

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

Я надеюсь, что это имеет смысл.

спасибо

4 81
css

4 ответа:

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

71

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

вот что у меня получилось:

http://jsbin.com/hapelawake

0

решение Flexbox

.main {
  display: flex;
  width: 90%;
}
.col1 {
  flex-grow: 1;
}
.col2 {
  width: 300px;
  margin-left: 5%;
}
<div class="main">
  <div class="col1" style="background: #eee;">Left column</div>
  <div class="col2" style="background: #ccc;">Right column</div>
</div>

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

0

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

мы испытывали подобные вопросы пока строящ жидкост-отзывчив-решетку основал систему средств.

-2