-2

私はとても絶望的です。使用したい 1 つのコードに問題があります。まず第一に、スクリーンショットがあります：

ゼータの助けを借りた新しいスクリーンショット。今は改善されましたが、まだ一部のアイテムにスペースがあります: 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要素の絶対位置を再計算する必要があります。たぶん、この記事は石積みのレイアウトを実現するための3つの非常に簡単な方法が役立つでしょう。

于 2012-11-28T22:13:56.373 に答える