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

Question

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

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

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

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

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

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

Thanks

Answer 1

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

Answer 2

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

Это то, что я закончил с:

http://jsbin.com/hapelawake

Answer 3

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

Мы столкнулись с подобными проблемами при создании медиасистемы с жидкостными характеристиками.

Answer 4

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>

Примечание: Добавить сгибать префиксов поставщика, если это требуется supported browsers.