Question

我试图创建一个类似于Facebook时间轴的时间轴，即我想要一个包含两列的时间轴，我可以在左侧和右侧放置元素。

为了做到这一点，我开始使用以下代码，但它没有按预期工作：

<ol class="timeline2 clear">
  <li class="spine">

  </li>

  <?php 
  $counter=0;
  foreach ($response as $row) { 
  if($counter % 2 == 0){$class= "right";} else $class="left";
  ?>
  <li class="<?=$class ?>">
    <i class="pointer"></i>
    <div class="unit">
      <!-- Story -->
      <div class="storyUnit">
        <div class="imageUnit">
        <? if (empty($row->pic)) { ?>
          <a href="#"><img width="32" height="32" alt="" src="images/nopic.png"></a>
          <? } else  { ?>
          <a href="#"><img width="32" height="32" alt="" src="uploads/<?php echo $row->pic; ?>"></a>
          <? } ?>
          <div class="imageUnit-content">
            <h4><a href="./home/myaccount/<?php echo $row->id; ?>"><?php echo $row->fullname; ?></a></h4>
            <p><?php echo $row->ev_date ?></p>
          </div>

        </div>

        <p><?php echo $row->ev_text; ?></p>
        <? if (!empty($row->ev_pic)) { ?>
        <p><img src="uploads/<?php echo $row->ev_pic ?>" width="250" height="250"</p>
        <? } ?>
      </div>
      <!-- / Story -->

      <!-- Units -->
      <ol class="storyActions">
       <!-- / Comment --> 
      </ol>
      <!-- / Units -->

    </div>
  </li>
   <?php $counter++; } ?>
   <div class="clear"></div>
</ol>

<? } ?>

这个盒子的CSS如： -

.timeline2 {
    background: url("../images/line.png") repeat-y scroll center top transparent;
    list-style: none outside none;
    margin: 0;
    padding: 6px;
    position: relative;
    height:auto;
}
.timeline2 > li {
    clear: left;
    float: left;
    margin-bottom: 15px;
    position: relative;
    width: 326px;
    z-index: 2;
}
.timeline2 > .right {
    clear: right;
    float: right;
}
.timeline2 .pointer {
    background: url("../images/icons-4.png") no-repeat scroll -41px -28px transparent;
    height: 15px;
    position: absolute;
    right: -18px;
    top: 20px;
    width: 19px;
}
.timeline2 .right > .pointer {
    background-position: -61px -28px;
    left: -18px;
    right: auto;
}
.timeline2 > .left + .right > .pointer {
    top: 40px;
}
.timeline2 > .right + li > .pointer {
    top: 40px;
}
.timeline2 .highlight {
    clear: both;
    float: none;
    width: auto;
}
.timeline2 .spine {
    height: 100%;
    left: 436px;
    position: absolute;
    width: 29px;
    z-index: 1;
}
.timeline2 .spine > a, .timeline2 .spine a:visited {
    display: block;
    height: 100%;
}
.unit {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C4CDE0;
    border-radius: 3px 3px 3px 3px;
    padding: 5px;
}
.storyUnit {
    padding: 10px;
}
.imageUnit {
    border-bottom: 1px solid #CCCCCC;
    font-size: 11px;
    margin-bottom: 15px;
    padding-bottom: 5px;
}
.imageUnit .imageUnit-content {
    display: inline-block;
    padding-left: 5px;
    vertical-align: top;
}
.imageUnit .imageUnit-content > p {
    margin: 0;
}

.imageUnit .imageUnit-content a{
    display: inline-block;
    padding-left: 5px;
    vertical-align: top;
    color: #3589CF;
}


.photoUnit {
    margin: 0 -10px -5px;
}
.controls {
    background: none repeat scroll 0 0 #F2F2F2;
    border-top: 1px solid #E6E6E6;
    list-style: none outside none;
    margin: 5px -5px -5px;
    padding: 4px;
}
.controls > li {
    display: inline-block;
}
.controls .post {
    float: right;
}
.actions {
    font-size: 11px;
    font-weight: bold;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}
.actions > li {
    border-left: 1px solid #E5E5E5;
    display: inline;
    float: left;
}
.actions > li:first-child {
    border-left: medium none;
}
.actions > li > a {
    display: inline-block;
    margin: 0 3px;
    padding: 5px;
}
.actions > li > a:hover {
    background: none repeat scroll 0 0 #EBEEF4;
    text-decoration: none;
}
.actions .active > a {
    color: #000000;
}
.storyActions {
    background: none repeat scroll 0 0 #EDEFF4;
    font-size: 11px;
    list-style: none outside none;
    margin: 0;
    padding: 5px 10px;
}
.storyActions > li {
    display: inline;
}
.storyActions > li:before {
    content: " · ";
}
.storyActions > li:first-child:before {
    content: "";
}

#Spinner {
    padding: 10px 0;
    text-align: center;
}

当左框大于右边时，还有另一个左框，右框不显示在左框后面，左框下方。

如何在左框后面显示

请参阅： - http://jsfiddle.net/RuVqu/

Answer 1

您需要使用动态网格布局。它的工作原理是根据可用的垂直空间将元素放置在最佳位置。

我怎么能像facebook时间线一样做盒子

1 个答案: