Question

我需要在facebook上作为时间线做时间线，每个div在另一个div下。对于块我有：-float：left，display：inline-block;但无法移除可用空间。

  <div class="wrap">
            <input type="hidden" id="tp" value="<?php echo $tp; ?>" />
        <?php
            $i=0;
            foreach($memes as $key=>$val){
                $i++;
                if($i!=1){
                    echo "<br clear='all' />";  
                    echo "<br clear='all' />";  
                }else{
                    echo "<br clear='all' />";      
                }
                echo "<h1 class='fd_date' alt='".$key."'>".(($res = dt_diff($key)) ? $res : (($dt = explode("-", $key)) ? $res : ""))." ".getDay($key)."</h1>";
                echo "<br clear='all' />";
                echo "<div class='memescont'>";
                    for($cnt=0;$cnt<count($val);$cnt++){
                        if($cnt%2==0){
                            echo"
                                <div class='fd_meme' rel='".$val[$cnt]['id']."' >
                                    <h1 class='title'>".$val[$cnt]['tit']."</h1>
                                    <img width='465px' alt='".trim("Комиксы, мемы - ").$val[$cnt]['tit']."' src='".base_url()."upload/".$val[$cnt]['src']."' />
                                    <div class='social'>
                                        <div class='likes'>Понравилось:</div>
                                        <div class='shared'>Поделиться:</div>
                                    </div>
                                </div>
                            ";
                        }else{
                            echo"
                                <div class='fd_meme' rel='".$val[$cnt]['id']."' >
                                    <h1 class='title'>".$val[$cnt]['tit']."</h1>
                                    <img width='465px' alt='".trim("Комиксы, мемы -").$val[$cnt]['tit']."' src='".base_url()."upload/".$val[$cnt]['src']."' />
                                    <div class='social'>
                                        <div class='likes'>Понравилось:</div>
                                        <div class='shared'>Поделиться:</div>
                                    </div>
                                </div>  
                            ";
                        }
                    }
                echo "</div>";
            }
         ?>
            <br clear="all" />
</div>

css：

.content {
    height: 100%;
    overflow: auto;
    position: absolute;
    width: 100%;
    z-index: 3;
}

.head {
    display: inline-block;
    width: 100%;
    z-index: 2;
}

.wraphead {
    margin: 5% auto;
    left: 0;
    right: 0;
    clear: both;
    display: block;
    margin: 0 auto;
    width: 1280px;
    height: 64px; 
    background: url(../i/header.png) 0 0 no-repeat;); position: fixed; top: 0; z-index: 2;
}
#logo { width: 145px; height: 38px; background: url(../i/logo.png) 0 0 no-repeat; float:left; margin: 11px 0;}
.links { height: 60px; float: left; margin-left: 115px;}
.links a { float: left; color: #fff; font-size: 14px; font-family: Verdana, Geneva, sans-serif; margin: 17px 90px 23px 0; }
.links a:hover {cursor: pointer;}
.langs {float: left; width: 62px; height: 20px; border: 1px solid #dedede; border-radius: 1px; margin: 17px 0 23px; }
.langs .lang { margin-left: 8px; width: 10px; height: 8px; margin-top: 6px; margin-bottom: 6px; display: inline-block;}
.lang.ru {background: url(../i/ru.png) 0 0 no-repeat;}
.langs span { font-size: 10px; font-family: Verdana, Geneva, sans-serif; font-style: normal; color: #ffffff; float: right; display: inline-block; margin-top: -18px; margin-right: 22px;}
em.lang_select{ width: 5px; height: 3px; background: url(../i/lang_select.png) 0 0 no-repeat; display: inline-block; float: right; margin-top: -11px; margin-right: 10px}
em.lang_select:hover {cursor: pointer; }
.wrap {width: 980px; display: block; margin: 0 auto;}
.memes {width: 100%; display: inline-block;}
.memes .wrap { background: #fff;  z-index: -1;    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.5); /* Для Firefox */
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5);  /*Для Safari и Chrome */ 
    box-shadow: 0 0 3px rgba(0,0,0,0.5); /* Параметры тени */ }
.lft { width: 465px; display: inline-block;  padding: 10px 0; }
h1.title{ font-size: 20px; color: #000; font-family: Arial, Helvetica, sans-serif; max-width: 460px; display: inline-block; float: left; font-weight: lighter; text-align: left; margin: 4px 0;}
.martop40 { margin-top: 30px; }
.rgt { width: 465px; float:left; display: inline-block;  margin: 0 11px; padding-right: 13px; border-right: 2px solid #999999; }
h1.fd_date{ color: #626262; font-size: 16px; font-family: Verdana, Geneva, sans-serif; text-align: center; font-weight: lighter; bottom: 0;}
.line {width: 2px; display: inline-block; position: absolute; margin-left: 2px; background: url(../i/line.png) 0 0 repeat-y;  z-index: 0; min-height: 100%; height: auto;}
.memescont {margin: -10px 0;}
.social { height: 80px; width: 469px; background: url(../i/social_bg.png) 0 0 no-repeat; }
.rgt img, .lft img {border: 1px solid #999;}
.fd_meme { width: 465px; float: left; margin: 0 12px; display: inline-block;}
.right { width: 490px; float: left; }
.left { width: 490px; float: right; }
.likes, .shared {font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #272727; padding-top: 12px; padding-left: 10px; display: inline-block; width: 202px; height:60px;}

pic：http://picshare.ru/view/97355/rand.png.html PS。抱歉我的英语不好。

Answer 1

听起来你正在寻找jQuery砌体插件。见here

这就是它的样子

时间线麻烦

1 个答案: