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

@Dmitrin · Регистрация: 04.12.2012

Author24 — интернет-сервис помощи студентам

Здравствуйте. Подскажите, как реализовать в html и css такое: есть 2 блока. Расположены на одной линии. Один блок должен занимать по ширине 320px, а другой занимать всю оставшуюся площадь. Чтобы при смене разрешения экрана правый блок (см на картинке) всегда был фиксированной ширины, а левый подстраивался под него.

@Kenworth · 13.08.2016, 16:39

1 способ) bootstrap

CSS

<section>
   ...
  <div class="row">
    <div class="col-md-9">Кпасный блок</div>
    <div class="col-md-3">синий блок</div>
  </div>
   ...
</section>

2 способ)

HTML5

<section>
  <div class="wrapper">
    <div class="red-block">Кпасный блок</div>
    <div class="blue-block">синий блок</div>
  </div>
</section>

Стиль с отступом:

CSS

.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

.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

<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

@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

Комментарий модератора

Код из песочницы дублируем на форуме!

@Dmitrin · 13.08.2016, 16:54 **[ТС]**

Kenworth, очень благодарен, пригодился второй способ без отступов))

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
		1
	Резиновость блоков 13.08.2016, 16:23. Показов 1550. Ответов 2 Метки нет (Все метки) Здравствуйте. Подскажите, как реализовать в html и css такое: есть 2 блока. Расположены на одной линии. Один блок должен занимать по ширине 320px, а другой занимать всю оставшуюся площадь. Чтобы при смене разрешения экрана правый блок (см на картинке) всегда был фиксированной ширины, а левый подстраивался под него. Миниатюры 0

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
	13.08.2016, 16:54 [ТС]	3
	Kenworth, очень благодарен, пригодился второй способ без отступов)) 0

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

Решение