CSS встановлює ширину, щоб заповнити% залишкової площі

Вибачте за трохи сміттєву назву. Я не міг подумати, як краще описати цей.

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

Моя проблема полягає в наступному:

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

Я не знаю, чи можна змішувати px і% з divs і width.

Сподіваюсь, це має сенс.

Дякую

Це є. Ви шукаєте напіврідку компоновку. Квест був спочатку святим Граалем реалізації CSS ... Але, як ви можете бачити за цим посиланням (вони роблять 3 стовпці, 2 виправлені, але це легко змінити), це проблема, яку давно вирішено =)

Я також швидко зробив експеримент, переглянувши цілу низку потенційних рішень. Я намагався зробити суміш рідини та фіксованих рядків та стовпців.

Це те, з чим я закінчився:

http://jsbin.com/hapelawake

Якщо ви віддаєте перевагу уникати плаваючих та виправлених виправлень, використовуйте гнучке розташування.

.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>

Примітка. Додайте префікси постачальників гнучких, якщо це потрібно вашим підтримуваним браузером .

Зараз працює над JS3. JS3 - це концепція інтегрованого JavaScript 1.8 у полегшену фазу DOM для вхідної обробки кодів JS, схожих на власні в HTML5 для обробки як мови простоти та інтегральної розробки. Я запитував JavaScript протягом 1996 та 1997 років, помітивши, що доступ до вмісту, який контролюється сценаріями ActiveX, неможливий. Мій батько, який працював у Digital Equipment Corporation, яку придбали Compaq та HP, зрозумів важливість моїх заяв і отримав право працювати в більш заможній корпорації, ніж HP, Revenio та Ionas, зокрема Oracle, щоб зрозуміти J2EE. HP може підтримувати перехід J2EE у вхідний HTML5, водночас повертаючись, щоб не мати проблем.

Думаючи про мою основну концепцію та структурну підтримку в розробці, JS3 може створити траверсивну обробку допустимих алгоритмів обходу OOP HTML5 у jQuery або JS та відтворити у вхідний код, який перевіряє, чи потрібно обробляти додаткові функції CSS3, зазвичай зарезервовані для JavaScript 1.7 або JavaScript 1.8, такий як Liquify помітив у 2002 році, коли мій Брат приєднався до Black Makers у Rutgers та UMASS. Його навички знань, опрацьовані на Perl, Python та інших, можна перенести в JS3, а також в CSS4 та HTML6. В даний час більшість нових кодів CSS3 не стандартизовані, але HTML5 може обробляти CSS4, що за часом настане в 2030 році, але може вступити у фазу тестування в 2021 році. Застосування медіа-запитів, не підтримане в 2009 році, коли я згадав про це своєму менеджеру на Веб-дизайн HIT, також відомий як Heritage Web Solutions, Я щиро розповідав про Хайді Кафтон, чудовому керівнику проектів божественного типу, який був інтегрований у веб-стандарти у розподілі медіа запитів. Добре дослідити будь-які мої запити щодо кодування, оскільки вони можуть бути перероблені на розвиток нових технологій. Медіа-запити не здійснюють активного обходу залишкового простору і динамічно встановлюють ширину елемента "залишок", але в адаптивному CSS4 сторінка фазуватиметься із використанням стилю адаптивного формату властивості CSS (з параметрами Invert, Traverse, Reciprocal Design Phasing) автоматично реагуючи і лише вимагає медіа-запитів, якщо користувач хоче спеціально не складний дизайн. В іншому випадку складність можна розробити з CSS3 Responsive в CSS4 за допомогою Invert, Divert, Traverse,

Довідково:

Якщо збірка не реагує, ви можете протестувати та встановити ширину елемента, виконавши прості математичні розрахунки.

Мої команди в Індії, Пакистані та інших країнах, що розвиваються, стикалися з подібними проблемами, будуючи систему засобів масової інформації, що реагує на рідини.