С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
23 / 23 / 11
Регистрация: 04.12.2012
Сообщений: 579
1

Резиновость блоков

13.08.2016, 16:23. Показов 1560. Ответов 2
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Здравствуйте. Подскажите, как реализовать в html и css такое: есть 2 блока. Расположены на одной линии. Один блок должен занимать по ширине 320px, а другой занимать всю оставшуюся площадь. Чтобы при смене разрешения экрана правый блок (см на картинке) всегда был фиксированной ширины, а левый подстраивался под него.
Миниатюры
Резиновость блоков  
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
13.08.2016, 16:23
Ответы с готовыми решениями:

Пропадает резиновость в Хроме
Столкнулся с проблемой и ни как не могу понять в чем причины. Вот сайт trevira.su Проблема...

Необходимо сделать резиновость одного дива в зависимости от другого, Как это реализовать на html и css
Добрый день, уважаемые форумчане! Подскажите, пожалуйста, как сделать верстку в html и css, чтобы...

Параллельная вертикальная прокрутка двух блоков и отдельная горизонтальная прокрутка одного из двух блоков
Всем привет! Помогите решить проблему, пожалуйста. Есть блок div, внутри которого два блока div (в...

Создать круг разделенный на 6 блоков, в центре логотип, при наведении на один из блоков он увеличивается
Доброго времени суток. Не знаю, как даже искать похожее. В общем нужно создать круг разделен на 6...

2
105 / 104 / 59
Регистрация: 21.10.2013
Сообщений: 346
13.08.2016, 16:39 2
Лучший ответ Сообщение было отмечено Dmitrin как решение

Решение

1 способ) bootstrap
CSS
1
2
3
4
5
6
7
8
<section>
   ...
  <div class="row">
    <div class="col-md-9">Кпасный блок</div>
    <div class="col-md-3">синий блок</div>
  </div>
   ...
</section>

2 способ)
HTML5
1
2
3
4
5
6
<section>
  <div class="wrapper">
    <div class="red-block">Кпасный блок</div>
    <div class="blue-block">синий блок</div>
  </div>
</section>
Стиль с отступом:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrapper{
  width: 940px;
  display: block;
}
 
.red-block{
  width: calc(100% - 320px);
  background: red;
  display: inline-block;
}
 
.blue-block{
  width: 320px;
    background: blue;
    display: inline-block;
}

Стиль без отступа:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wrapper{
  width: 940px;
  display: block;
    clear: both;
}
 
.red-block{
  width: calc(100% - 320px);
  background: red;
    float: left;
}
 
.blue-block{
  width: 320px;
    background: blue;
    float: left;
}

3 способ) flexbox

HTML5
1
2
3
4
5
6
7
8
9
<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
@import "compass/css3";
 
.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  font-weight: bold;
  text-align: center;
}
 
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}
 
.header {
  background: tomato;
}
 
.footer {
  background: lightgreen;
}
 
.main {
  text-align: left;
  background: deepskyblue;
}
 
.aside-1 {
  background: gold;
}
 
.aside-2 {
  background: hotpink;
}
 
@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}
 
@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}
 
body {
  padding: 2em; 
}
http://codepen.io/HugoGiraudel/pen/qIAwr

 Комментарий модератора 
Код из песочницы дублируем на форуме!
1
23 / 23 / 11
Регистрация: 04.12.2012
Сообщений: 579
13.08.2016, 16:54  [ТС] 3
Kenworth, очень благодарен, пригодился второй способ без отступов))
0
13.08.2016, 16:54
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
13.08.2016, 16:54
Помогаю со студенческими работами здесь

Выделить последовательно пять блоков памяти. Высвободить второй блок, после чего вывести информацию о цепочке блоков
Выделить последовательно пять блоков памяти. Высвободить второй блок, после чего вывести информацию...

Позиционирование блоков
Добрый вечер уважаемые форумчане, Столкнулся с проблемой позиционирования блоков изображений. Я...

Сортировка блоков
Добрый день есть блоки которые нужно отсортировать &lt;div class=&quot;itrow&quot;&gt; &lt;div class=&quot;item&quot;...

Центрирование блоков
Вот я взял блок div и отцентрировал его margin: 0 auto;, внутри которого будут располагаться все...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Книги и учебные ресурсы по C#
InfoMaster 08.01.2025
Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .
Что такое NullReferenceEx­­­ception и как исправить?
InfoMaster 08.01.2025
NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .
Что такое Null Pointer Exception (NPE) и как это исправить?
InfoMaster 08.01.2025
Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .
Русский язык в консоли C++
InfoMaster 08.01.2025
При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .
Telegram бот на C#
InfoMaster 08.01.2025
Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .
Использование GraphQL в Go (Golang)
InfoMaster 08.01.2025
Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор?
Alexander-7 08.01.2025
Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .
Как работать с GraphQL на TypeScript
InfoMaster 08.01.2025
Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .
Счётчик на базе сумматоров + регистров и генератора сигналов согласования.
Hrethgir 07.01.2025
Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .
Как перейти с Options API на Composition API в Vue.js
BasicMan 06.01.2025
Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .
Архитектура современных процессоров
inter-admin 06.01.2025
Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .
История создания реляционной модели баз данных, правила Кодда
Programming 06.01.2025
Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru