1

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

блоки div

5 ответов 5

1

    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>

1

На мой взгляд, самое лучшее решение на 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>

0

можно так с помощью 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>

1
  • круто! а можно как - нибудь с использованием CSS inline-block? 16 мар 2020 в 8:00
0

С 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 которые и являются оптимальными на текущий момент

0

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

Ваш ответ

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

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