CSS
- 2 ответа
- 0 вопросов
2
Вклад в тег
<style>
.mainblock{
display:flex;
flex-flow:row;
border:solid 2px #ff0000;
align-content:center;
justify-content:center;
}
.columnblock{
display:flex;
flex-flow:column;
border:solid 2px #00ff00;
}
.itemblock{
width: 300px;
display:flex;
flex-flow:row;
align-content:center;
justify-content:space-between;
border:solid 2px #0000ff;
}
.itemtitle {
display:flex;
flex-flow:column;
align-content:center;
justify-content:center;
}
.itemicon {
width:48px;
display:flex;
flex-flow:column;
align-content:center;
justify-content:center;
border:solid 2px #555555;
}
.itemicon img {
height: 48px;
}
</style>
<div class="mainblock">
<div class="columnblock">
<div class="itemblock">
<div class="itemtitle"><div>Item title</div></div><div class="itemicon"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png"/></div>
</div>
<div class="itemblock">
<div class="itemtitle"><div>Item title</div></div><div class="itemicon"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png"/></div>
</div>
</div>
<div class="columnblock">
<div class="itemblock">
<div class="itemtitle"><div>Item title</div></div><div class="itemicon"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png"/></div>
</div>
<div class="itemblock">
<div class="itemtitle"><div>Item title</div></div><div class="itemicon"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png"/></div>
</div>
</div>
</div>