На фотографии ясно, что нужно сделать. Знаю два способа сделать это - позиционирование и флексбокс. Не стал делать по своему, т.к. уйдет много кода. Здесь хочу узнать инной способ сделать это, но и ещё с меньшем кодом. Буду благодарен за помощь)
2 ответа
Так годится?
div {
display: inline-block;
width: 30%;
border: 1px solid gray;
padding: 5px 5px 5px 60px;
box-sizing: border-box;
}
img {
margin-left: -55px;
float: left;
}
b {
display: block;
}
<div>
<img src="https://i.sstatic.net/RIAVG.jpg?s=48&g=1" />
<b>Header</b>
<span>text text text text text text text text </span>
</div>
<div>
<img src="https://i.sstatic.net/RIAVG.jpg?s=48&g=1" />
<b>Header</b>
<span>text text text text text text text text </span>
</div>
<div>
<img src="https://i.sstatic.net/RIAVG.jpg?s=48&g=1" />
<b>Header</b>
<span>text text text text text text text text </span>
</div>
Вариант на Flex.
.grid {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
.grid .item {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex: 0 1 auto;
}
.grid .item:not(:last-child) {
margin-right: 10px;
}
.grid .icon {
margin-right: 10px;
}
/* вместо иконки */
.grid .icon::before {
content: '';
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
background: #ccc;
}
.grid .text h3 {
margin-top: 0;
}
<div class="grid">
<div class="item">
<div class="icon"></div>
<div class="text">
<h3>Idea Developing</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority alteration in some form with design</p>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<h3>Best Coding</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority alteration in some form with design</p>
</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="text">
<h3>Game Design</h3>
<p>There are many variations of passages of Lorem Ipsum available, but the majority alteration in some form with design</p>
</div>
</div>
</div>
Если нужно, чтобы картинка выравнивалась с текстом по высоте
.grid {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
.grid .item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
flex: 0 1 auto;
}
.grid .item:not(:last-child) {
margin-right: 10px;
}
.grid .title {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
margin-bottom: 10px;
}
.grid .icon {
margin-right: 10px;
}
/* вместо иконки */
.grid .icon::before {
content: '';
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
background: #ccc;
}
.grid .title h3 {
margin: 0;
}
.grid .text {
padding-left: 40px; /* ширина иконки + её отступ */
box-sizing: border-box;
}
<div class="grid">
<div class="item">
<div class="title">
<div class="icon"></div>
<h3>Idea Developing</h3>
</div>
<div class="text">
<p>There are many variations of passages of Lorem Ipsum available, but the majority alteration in some form with design</p>
</div>
</div>
<div class="item">
<div class="title">
<div class="icon"></div>
<h3>Best Coding</h3>
</div>
<div class="text">
<p>There are many variations of passages of Lorem Ipsum available, but the majority alteration in some form with design</p>
</div>
</div>
<div class="item">
<div class="title">
<div class="icon"></div>
<h3>Game Design</h3>
</div>
<div class="text">
<p>There are many variations of passages of Lorem Ipsum available, but the majority alteration in some form with design</p>
</div>
</div>
</div>