Question

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

在Zeta的帮助下，新的SCREENSHOT。它现在更好，但仍然在某些项目的空格： 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);
}

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

Answer 1

那是因为你使用clear:both，它强制右边的元素留在左边的元素下面，反之亦然。仅对奇数元素使用clear:left;float:left;，对偶数元素example使用clear:right; float:right;。

此外，您必须在两个偶数和奇数元素上使用float。 float会在相反的一侧生成以下内容，因此，如果仅应用float偶数或奇数元素，则会再次获得空格。

Answer 2

使用纯css（跨浏览器兼容）无法做到这一点。您需要使用JS并重新计算所有li元素的绝对位置。也许这篇文章Three Super Easy Ways to Pull Off a Masonry Layout可以提供帮助。

在css中定位偶数和奇数

2 个答案: