我正在尝试通过育儿div左侧的“日期栏”来进行博客时尚的设计。它可以在IE和Chrome中运行,但在Firefox中,顶级父级div会扩展。
html
<div class="post_bg">
<div class="post_inner">
<div class="blue">date</div>
text
<br /><br />
</div>
</div>
的CSS
.post_bg {
width: 700px;
background-color: #f0f0f0;
outline: 1px solid #d8d8d8;
border-top: 1px solid #fff;
padding: 5px 5px 5px 5px;
}
.post_inner {
clear: both;
background-color: #fdfdfd;
border: 1px solid #d8d8d8;
}
.blue {
overflow: visible;
width: 40px;
height: 40px;
background-color: #55a4cc;
position: relative;
bottom: -5px;
right: 40px;
}
这是一张显示我的问题的图片:
而当我使用它时,如何将我的“文本”显示在框的顶部?
最佳答案
要使轮廓在Firefox中起作用,请替换:
outline: 1px solid #d8d8d8;
带有:
box-shadow: 0 0 0 1px #d8d8d8;
要使文本与顶部对齐,请创建
.post_inner
position: relative;
和.blue
position: absolute;
。然后相应地调整.blue
的位置。演示:http://jsfiddle.net/ThinkingStiff/8SyGV/
CSS:
.post_bg {
background-color: #f0f0f0;
border-top: 1px solid #fff;
left: 40px;
box-shadow: 0 0 0 1px #d8d8d8;
padding: 5px 5px 5px 5px;
position: relative;
width: 300px;
}
.post_inner {
background-color: #fdfdfd;
border: 1px solid #d8d8d8;
position: relative;
}
.blue {
background-color: #55a4cc;
height: 40px;
left: -40px;
position: absolute;
top: 0;
width: 40px;
}
HTML:
<div class="post_bg">
<div class="post_inner">
<div class="blue">date</div>
text
<br /><br />
</div>
</div>