Всем привет, недавно начал изучать HTML, как разместить 3 блока используя блочный элемент div и inline-block как на картинке, левый большой и 2 правых один под другим, заранее спасибо!!!
5 ответов
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>
На мой взгляд, самое лучшее решение на 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>
можно так с помощью 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>
С 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 которые и являются оптимальными на текущий момент
С 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>