Bootstrap：使容器具有偏移量

Question

我试图建立一个博客系统，我应该如何定位博客文章div，以便它有适合日期div的空白？

我使用的代码：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

.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: absolute;
    border: 2px white solid;
    width: 55px;
    height: 50px;
    left: -40px;
    background: black;
}

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

＆＃13;

＆＃13;

＆＃13;

对此有何帮助？我需要它，所以博客帖子可以适合div与日期。

Answer 1

尝试：

.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; 
}

这会将日期放在帖子容器的左上角，并将文本换行。