БЛОГ НА HUSL


как разместить блоки используя

Автор вопроса: Есим Макишев

Всем привет, недавно начал изучать HTML, как разместить 3 блока используя блочный элемент div и inline-block как на картинке, левый большой и 2 правых один под другим, заранее спасибо!!!

блоки div


Источник

Ответы (5 шт):

Автор решения: Vadim.Sharoikin

можно так с помощью css grid

.parent {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.div1 { grid-area: 1 / 1 / 3 / 2;
background:red;}
.div2 { grid-area: 1 / 2 / 2 / 3;
background:blue;}
.div3 { grid-area: 2 / 2 / 3 / 3; 
background:green;}
<div class="parent">
<div class="div1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="div2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>

→ Ссылка
Автор решения: CbIPoK2513

С float. 

.grid {
  display: block;
  width: 400px;
}

.grid::after {
  content: '';
  display: block;
  clear: both;
}

.grid > .left,
.grid > .right {
  display: inline-block;
  float: left;
}

.grid > .left {
  width: calc(100% - 135px);
  margin-right: 10px;
}

.grid > .right {
  width: 125px;
}

.grid .block {
  display: block;
  width: 100%;
  background: #08f;
}

.grid > .left .block {
  height: 200px;
}

.grid > .right .block {
  height: calc(100px - 5px);
}

.grid > .right .block:nth-child(1) {
  margin-bottom: 10px;
}
<div class="grid">
  <div class="left">
    <div class="block"></div>
  </div>
  <div class="right">
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

С "чистым" inline-block

.grid {
  display: block;
  width: 400px;
  font-size: 0;
}

.grid > .left,
.grid > .right {
  display: inline-block;
}

.grid > .left {
  width: calc(100% - 135px);
  margin-right: 10px;
}

.grid > .right {
  width: 125px;
}

.grid .block {
  display: block;
  width: 100%;
  background: #08f;
}

.grid > .left .block {
  height: 200px;
}

.grid > .right .block {
  height: calc(100px - 5px);
}

.grid > .right .block:nth-child(1) {
  margin-bottom: 10px;
}
<div class="grid">
  <div class="left">
    <div class="block"></div>
  </div>
  <div class="right">
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

Красивее и проще будет сделать как написал @Vadim.Sharoikin, продублирую ответ но со "своим" исполнением)

.grid {
  display: grid;
  grid-template-areas: 
    'g1 g1 g2'
    'g1 g1 g3';
  grid-gap: 10px;
  width: 450px;
  height: 250px;
}

.grid > .block {
  display: block;
  width: 100%;
  height: 100%;
  background: #08f;
}

.grid > .block:nth-child(1) {grid-area: g1;}
.grid > .block:nth-child(2) {grid-area: g2;}
.grid > .block:nth-child(3) {grid-area: g3;}
<div class="grid">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

→ Ссылка
Автор решения: Евгений Иванов

С float

.parent:after {
  content: '';
  display: table;
  width: 100%;
  clear: both;
}

.div {
  float: left;
  width: 50%;
}

.div1 {
  background: red;
}

.div2 {
  background: blue;
}

.div3 {
  background: green;
}
<div class="parent">
<div class="div div1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="div div2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="div div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>

C columns

.parent {
  columns: 2;
  max-height: 300px;
}

.div {
  display: block;
  margin-bottom: 10px;
  vertical-align: top;
}

.div1 {
  background: red;
}

.div2 {
  background: blue;
}

.div3 {
  background: green;
}
<div class="parent">
<div class="div div1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="div div2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="div div3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>

Еще можно флексом и как пример у @Vadim.Sharoikin c grid которые и являются оптимальными на текущий момент

→ Ссылка
Автор решения: Sevastopol'

На мой взгляд, самое лучшее решение на CSS с использованием свойства inline-block.

Полностью адаптивно. 

* {margin: 0; padding: 0;}
.block__left,.wrp {display: inline-block; float: left;}
.block__left {width: 70%;}
.wrp {float: right; width: 28%;}
.block__left__ok {width: 100%; padding: 40% 0; background-color: #00a2ff;}
.wrp__ok {width: 100%; padding: 0;}
.block__01,.block__02 {width: 100%; display: inline-block; float: left;}
.block__01__ok,.block__02__ok {width: 100%; background: #00a2ff; padding: 48% 0;}
.block__02__ok {margin-top: 8%;}
<div class="block__left">
  <div class="block__left__ok"></div>
</div>
<div class="wrp">
  <div class="wrp__ok">
    <div class="block__01">
      <div class="block__01__ok"></div>
    </div>
    <div class="block__02">
      <div class="block__02__ok"></div>
    </div>
  </div>
</div>

→ Ссылка
Автор решения: Denis640Kb 

    body{
        height: 550px;
        width: 100%;
    }
    .main{
        width: 100%;
        height: 100%;
        color: #000022;
    }
    .big{
        display: inline-block;
        width: 70%;
        height: 100%;
        background-color: #003eff;
    }
    .smalls {
        display: inline-block;
        width: 29%;
        height: 100%;
    }
    .small{
        border-bottom: 3px solid white;
        height: 49.7%;
        background-color: red;
    }
<body>
    <div class="main">
        <div class="big"></div>
        <div class="smalls">
            <div class="small"></div>
            <div class="small"></div>
        </div>
    </div>
</body>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.