4

Необходимо на страничке сделать 2 блока, которые бы в сумме занимали всю возможную ширину. Правый блок узкий и не должен изменять своего размера при растяжении или сжатии страницы, а левый должен занимать всю оставшуюся ширину. Попробовал своими силами, но либо левый блок занимает не всё пространство, либо выдавливает правый на новую строку, а такого быть не должно.

.div3 {
  max-width: 700px;
}

.div1 {
  height: 50px;
  max-width: 550px;
  background: #f99;
  width:100%;
  text-align:center;
  display: inline-block;
  float:left;
}

.div2 {
  height: 50px;
  background: #99f;
  display: inline-block;	
  float: right;
}
<div class="div3">
  <div class="div1">Резиновый блок</div>
  <div class="div2">Фиксированный</div>
</div>

5
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 15 мар 2016 в 7:55
  • 1
    Возможный дубликат вопроса: Вычисление ширины input
    – Grundy
    1 янв 2017 в 15:28
  • @Grundy Да я бы не сказал, что это дубликат, так как там вопрос по картинке и про input, там ещё куча доп. требований. Там ещё 50% окна надо чтобы занималось и т.д., короче какой-то он очень специфический. Уверен, что текущий вопрос задавался, но я бы поиск бы другой вариант. 4 янв 2017 в 9:44
  • @VadimOvchinnikov, возможно стоит наоборот закрыть. По сути вопросы одинаковы: один блок фиксированной ширины, второй нет
    – Grundy
    4 янв 2017 в 9:45
  • @Grundy Ну не так они и похожи. Если искать чисто концептуальную схожесть, то можно большую часть вопросов по HTML\CSS позакрывать, так как принципы решения часто одни и те же. 4 янв 2017 в 9:47

5 ответов 5

3

Я знаю, что Flexbox так может. Его, правда, стоит применять с осторожностью, в IE он багованный:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  height: 200px;
  border: 5px solid black;
}
.fixed {
  flex: 0 0 200px;
  background-color: #FF9999;
}
.rubbery {
  flex: 1 1 25%;
  background-color: #9999FF;
}
<div class="container">
  <div class="rubbery"></div>
  <div class="fixed"></div>
</div>

4
  • Очень плохо работает с мобильника :( Других вариантов нет?
    – molegos
    14 мар 2016 в 8:41
  • @molegos, используйте таблицу
    – Grundy
    14 мар 2016 в 9:36
  • Таблица для разметки это прошлый век =)
    – Viktor
    14 мар 2016 в 16:47
  • @Vadizar, прекрати этот вандализм! Ты решил во всех темах отметиться?
    – vp_arth
    22 фев 2017 в 9:19
2

Посмотрите внимательно, у вас .div2 сейчас никак не фиксирован. Задайте ему width явно.

Для вашей задачи display: inline-block не нужно, уберите его. Уберите из .div1 параметр max-width.

Поставьте для .div1 свойство float: right, если блоки пшменяютмя местами, исправил их положение в html-коде.

Должно помочь.

3
  • Спорный вопрос я больше предпочитаю использовать именно inline-block IE7 его поддерживает,а делать для более древнего смысла нет.... Вопрос лишь в умении пользоваться и правильном понимании этих правил....
    – pepel_xD
    14 мар 2016 в 8:53
  • По моему мнению inline-block и block немного для разных задач. Например в вашем примере применение inline-block и float одновременно нецелесообразно, так как с точки зрения разметки выполняют одну и ту же задачу.
    – Viktor
    14 мар 2016 в 16:46
  • Сделал ваш вариант - резиновый растягивается на всю ширину и выталкивает фиксированный на новую строку :(
    – molegos
    15 мар 2016 в 3:15
1

Знать современные возможности flexbox и calc хорошо, но вот знать основы - куда важнее:

* {
  box-sizing: border-box;
}

.divMain:after {
  content: '';
  display: block;
  clear: both;
}
.divA {
  float: right;
  width: 200px;
  background: #99f;
}
.divB {
  overflow: hidden;
  background: #f99;
}
<div class="divMain">
  <div class="divA">
    Фиксированный блок
  </div>
  <div class="divB">
    Резиновый блок
  </div>
</div>

P.S. Порядок блоков в разметке важен.

8
  • Можете унижительную часть "Смотрю я на ответы с flexbox и calc и слезы наворачиваются." убрать или переформулировать? 2 янв 2017 в 12:29
  • @VadimOvchinnikov готов. 2 янв 2017 в 12:30
  • Знать современные возможности CSS хорошо, но вот знать основы - куда важнее:" Это вы основами называете разработку с хаками вроде float, clear, overflow, которые раннее использовались ввиду отсутствия достойный альтернатив? Табличную вёрстку и абсолютное позиционирование в расчёт не берём. 2 янв 2017 в 12:31
  • Я не спорю, что у вас идеальный ответ для тех кому надо IE7-9 поддерживать, но просто только старый CSS считать основами, как мне кажется, неверно. Знать CSS3 разве не основы? 2 янв 2017 в 12:33
  • @VadimOvchinnikov это не хаки, а именно основы. Мой вариант поддерживается большим количеством браузеров, при этом он требует меньше переменных, что делает его наиболее приемлемым вариантом. 2 янв 2017 в 12:33
1

Подобный вопрос уже обсуждался.

В вашем коде нужно применять либо float, либо inline-block. и вычислять размер резинового блока с помощью функции calc. Если использовать float, то не забывайте про clear, при использовании inline-block необходимо у элемента родителя убить размер шрифта, для того чтобы убить пробелы между блоками,которые возникнут так как блоки приобретут все свойства строчных элементов. vertical-align: top в данном случае задается для того,что-бы блоки не съезжали вниз при добавлении текста в них. Пробуйте эксперементируйте....... Однако разметка наfloat уже устарела и все чаще используют именно inline-block. Более продвинутые технологии позволяют использовать Flex, но его поддерживают только современные браузеры... и если ваш проект не нацелен на кроссбраузерность, то лучше конечно использовать его.

Вот пример:

.a {
  height: 400px;
  background: red;
  font-size: 0; /*для отображения текста в блоках не забудьте задать размер шрифта им.*/
}
.b, .c {
  display: inline-block; /* можно использовать свойство float */
  vertical-align: top; 
}
.b {
  width: 200px;
  outline: 3px solid green;
  height: 400px;
  font-size: 14px;
}

.c {
  width: calc(100% - 200px); /* расчет ширины */
  outline: 3px solid blue;
  height: 400px;
  font-size: 14px;
}
<div class="a">
  <div class="b">фиксированный</div>
  <div class="c">резиновый</div>
</div>

0

Еще как вариант:

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;  
}
.container {
  display: table;
  width: 100%;
  height: 200px;
  border: 5px solid black;
}
.fixed,
.rubbery{
  display: table-cell;
  vertical-align: top;
  padding: 25px;
}
.fixed {
  width: 150px;
  background-color: #FF9999;
}
.rubbery {  
  background-color: #9999FF;
}
<div class="container">
  <div class="rubbery">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
  <div class="fixed"> text text text text text text text text text text text text text text text text </div>
</div>

1
  • Если строить таблицу с помощью css свойств, она так же ресурсоемка как и HTML?
    – pepel_xD
    14 мар 2016 в 13:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.