Facebook时间轴样式css/html
我有一个问题,我不能把盒子一个接一个地重新排列,它们之间有一段距离,你能帮我吗。这些框有一个间隙,它们排列在一行中,而不是像我这样一行一行地排在另一行的下面Facebook时间轴样式css/html,html,css,Html,Css,我有一个问题,我不能把盒子一个接一个地重新排列,它们之间有一段距离,你能帮我吗。这些框有一个间隙,它们排列在一行中,而不是像我这样一行一行地排在另一行的下面 time, .time { font-size: 10px; color:gray; border-bottom: 1px solid #E7EBF2; min-width:350px; height:20px; padding-bottom: 5px; } #timeline { w
time, .time {
font-size: 10px;
color:gray;
border-bottom: 1px solid #E7EBF2;
min-width:350px;
height:20px;
padding-bottom: 5px;
}
#timeline {
width:846px;
list-style:none;
list-style-type: none;
background: url('../imgs/timeline.png') top center repeat-y;
margin: 0 auto;
padding:20px;
margin-bottom:10px;
}
#timeline li {
width:390px;
-moz-border-radius:2px;
border-radius:2px;
webkit-border-radius:2px;
border:1px solid #c3ccdf;
padding:5px;
background-color:#FFF;
}
#timeline li:nth-of-type(odd) {
clear: both;
float:right;
}
#timeline li:nth-of-type(odd), #timeline li:nth-of-type(even) {
margin:-10px 0 20px 0;
}
#timeline li:nth-of-type(even) .corner {
position:absolute;
display:block;
margin-left:383px;
width:20px;
height:15px;
background:url('../imgs/right.png');
}
#timeline li:nth-of-type(odd) .corner {
position:absolute;
display:block;
margin-left:-25px;
width:20px;
height:15px;
background:url('../imgs/left.png');
}
这里是演示这是因为你有明确的:两者都有;在这里:
此外,我还为时间线添加了float:left,这对我很有用。
但现在,bar timeline.png不是从上到下,而是只显示在第一个框中
#timeline li:nth-of-type(odd) {
clear: both;
float:right;
}