-2

我很绝望。我想使用的一个代码有问题。首先有截图：

在 Zeta 的帮助下新的屏幕截图。现在好多了，但在某些项目上仍有空格： https ://dl.dropbox.com/u/28372149/gasps.jpg

您会看到项目之间的那些空格。我不想帮助解决角落和点导致我的图形错误，我会修复它，但大问题是那些空间。

html:

<ol id="timeline">

<li>
    <div class="time">2.1.2012</div>
    <span class="corner"></span>
        <p style="text-align: left">
        V Česku bylo místy tepleji než v Řecku.
        <a href="http://www.novinky.cz/domaci/255046-v-cesku-bylo-misty-tepleji-nez-v-recku.html">
        CELÁ ZPRÁVA
        </a>
        </p>
  </li>

  <li>
    <div class="time">1.1.2012</div>
    <span class="corner"></span>
            <p style="text-align: left">
                <strong>Češi věznění v Zambii jsou doma, ze země odjeli při utajené akci.</strong>
                </br>
                <img align="centre" src="foto/leden/1.jpg"></br>Češi věznění v Zambii jsou doma, ze země odjeli při utajené akci. Trojice mužů obviněná
                tamními úřady ze špionáže se dostala domů ke konci roku, pravděpodobně po zásahu českých úřadů. Ty zambijské akci se špionážními prvky odsoudily.
                <a href="http://www.novinky.cz/domaci/254926-cesi-vezneni-v-zambii-jsou-doma-ze-zeme-odjeli-pri-utajene-akci.html">
                CELÁ ZPRÁVA
                </a>
                </p>
  </li>

CSS：

time,.time{
    font-size: 12px; color:gray; border-bottom: 1px solid #8b130e; min-width:350px; height:15px; padding-bottom: 1px;
}
#timeline{
    width:800px; list-style-type: none; background: url(timeline.png) top center repeat-y; margin: 0 auto; padding:20px; margin-bottom:10px;
}

#timeline li{
    width:375px; -moz-border-radius:2px; border-radius:2px; webkit-border-radius:2px; border:2px solid #d56560; padding:5px;background-color:#FFF;
}

#timeline li:nth-of-type(odd){
clear: right;float:both;float:right
}
#timeline li:nth-of-type(even){
clear: left;float:both;float:left
}
#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:380px;width:20px; height:15px;background:url(right.png);
}
#timeline li:nth-of-type(odd) .corner{
        position:absolute;display:block;margin-left:-25px;width:20px;height:15px;background:url(left.png);
}

有人真的可以帮我吗？我会很高兴的:)

4

2 回答 2

2

那是因为你使用clear:both，它强制右边的元素保持在左边的元素之下，反之亦然。仅clear:left;float:left;用于奇数元素和clear:right; float:right;偶数元素（示例）。

此外，您必须同时使用偶数float和奇数元素。将使以下内容在另一侧流动，因此如果您仅应用偶数或奇数元素，您将再次获得空格。floatfloat

于 2012-11-28T22:00:20.800 回答
0

它不能用纯 css（跨浏览器兼容）来完成。您需要使用 JS 并重新计算所有 li 元素的绝对位置。也许这篇文章三种超级简单的方法来完成砌体布局可以提供帮助。

于 2012-11-28T22:13:56.373 回答