Мой Справочник | CSS | Блочная вёрстка | Контент-боксы

<div class="content-box">
    <div class="content-logo logo-1"></div>
    <h3 class="content-title">Content-title</h3>
    <p class="content-description">Some text Some text Some text Some text Some text</p>
</div>
			

			
CSS:
    .content-box {
		position: relative;
		min-height: 150px;
		max-width: 500px;
		border: 2px solid black;
		padding: 5px;
		padding-left: 150px;
		padding-right: 15px;
	}
	.content-logo {
		position: absolute;
		top: 20px;
		left: 15px;
		width: 120px;
		height: 120px;
		border: 1px solid black;
	}
	.content-title {
		font-size: 25px;
		margin: 0;
		margin-top: 8px;
		border: 1px solid black;
	}
	.content-description {
		margin: 0;
		margin-top: 10px;
		border: 1px solid black;
	}
	.logo-1 {
		background-image: url(../pict/Trump.jpg);
		background-repeat: no-repeat;
	}

		

Результат

Применение

СЕТКА для контент-боксов на inline-block в три колонки

<div class="content-box-cont">
    <div class="content-box1">...</div>
    <div class="content-box2">...</div>
    <div class="content-box3">...</div>
    <div class="content-box4">...</div>
    <div class="content-box5">...</div>
    <div class="content-box6">...</div>
</div>
			

CSS:
/*Убираем пробелы у контейнера - инлайн-блоки реагируют на пустые пробелы в сетке*/
.content-box-cont {
    ...
    font-size: 0px; //Чтобы не было разных отступов
    ...
}
/*
Для 3-колоночной сетки задаём контент-боксам:
	отступы,
	строчно-блочный вид,
	размер-шрифта,
	убираем правый маргин у каждого третьего бокса.
*/
.content-box {
    display: inline-block;
    font-size: 16px;
    max-width: 180px;
    margin-right: 10px;
    margin-bottom: 10px;
    vertical-align: top;
}
.content-box:nth-child(3n) {margin-right: 0;}