Загрузочный лоток: сделать контейнер имеет смещения

Question

Я пытаюсь создать систему блога, как мне разместить позицию блога div, чтобы у него были такие пробелы, чтобы соответствовать дате div?

код я использую:

<div class="container post"> 
 
\t \t <div class="date"> 
 
\t \t <h3>20</h3> 
 
\t \t <h5>november</h5> 
 
\t \t </div> 
 
\t \t Lorem ipsum dolor sit amet 
 
</div>

.post{ 
 
\t margin-top: 40px; 
 
\t padding: 10px; 
 
\t color: white; 
 
\t background: black; 
 
\t border: 3px white solid; 
 
\t box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
 
\t position: relative; 
 
} 
 

 
.date { 
 
\t position: absolute; 
 
    border: 2px white solid; 
 
    width: 55px; 
 
    height: 50px; 
 
    left: -40px; 
 
    background: black; 
 
} 
 

 
.date h3{ 
 
\t position: relative; 
 
    top: -18px; 
 
    left: 11px; 
 
} 
 
.date h5{ 
 
\t position: relative; 
 
    top: -28px; 
 
    left: 2px; 
 
\t 
 
\t 
 
}

Любая помощь? Мне нужно, чтобы сообщение в блоге соответствовало дате.

Answer 1

Try:

.post { 
    margin-top: 40px; 
    padding: 10px; 
    color: white; 
    background: black; 
    border: 3px white solid; 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
    position: relative; 
} 

.date { 
    position: relative; 
    float: left; 
    border: 2px white solid;   
    height: 50px; 
    background: black; 
    margin: 0 10px 10px 0; 
    padding: 5px; 
} 

.date h3 { 
    position: relative; 
} 

.date h5 { 
    position: relative; 
} 

Это позволит поставить дату в верхнем левом углу почтового контейнера и обернуть текст вокруг него.