我有一個關于串列項的問題。如何編碼 3 個串列項在頂部，3 個在底部。它只是溢位到正確的站點。
<div class="container">
<ul>
<li>
<img src="/img/snail.png">
<h1 class="h1-cite">?nternetim neden yava??</h1>
<blockquote>Herkes internet dehas? de?ildir, ancak hi? kimse sayfalar?n yüklenmesini, videolar?n oynat?lmas?n? veya sosyal medyadan en son bilgileri almay? beklemeyi sevmez. ?nternetiniz yava?sa, bunun olmas?n?n birka? nedeni olabilir. Sorunun internetiniz mi yoksa bilgisayar?n?zla ilgili bir sorun mu oldu?unu belirlemenin en kolay yolu h?z?n?z? test etmektir. Buna iki k?s?m dahildir: yükleme h?z?, bir web sitesine resim ve video yükleme h?z? ve indirme h?z?, ba?ka bir yerden ne kadar h?zl? bilgi ald???n?z. Hi? kimse bir video arabelle?ini saatlerce tekrar tekrar izlemek istemez. En sevdi?iniz resimleri sosyal medyaya yükleyememenin hayal k?r?kl???n? hepimiz biliyoruz. Sorunun internet hizmetinizde olup olmad???n? anlamak i?in h?z?n?z? test etmeniz gerekir.</blockquote>
</li>
<li>
<img src="/img/quest.png">
<h1 class="h1-cite">Ne yapmal?y?m?</h1>
<blockquote>?lk ve en ?nemli ad?m internet h?z?n?z? test etmektir; bu, sorunun bilgisayar?n?z, a??n?z veya internet servis sa?lay?c?n?zla ilgili olup olmad???n? anlaman?za yard?mc? olacakt?r. Bir h?z testi ??zümü se?erken güvenilir bir hizmet se?mek ?nemlidir, ?ünkü yanl?? sonu?lar daha fazla hayal k?r?kl???na neden olabilir ve üretkenli?i geciktirebilir. H?z Testi Me, internet h?z?n?z? ?l?mek i?in i?eri?e h?zl? eri?im sa?lar, bu da sonu?lar? indirme ve yükleme h?zlar?na do?ru bir ?ekilde b?lerek yaln?zca ana soruna odaklanman?za olanak tan?r.</blockquote>
</li>
<li>
<img src="/img/rocket.png">
<h1 class="h1-cite">?nternet H?z? Neden Bu Kadar ?nemli?</h1>
<blockquote>?nternet h?z?, ?al??man?n, al??veri? yapman?n veya sadece ?evrimi?i e?lenmenin kritik bir bile?enidir. ?nternet h?z?n?z? arada bir internet h?z testi ile kontrol etmek, internet ba?lant?n?z?n ?dedi?iniz internet h?z?yla ayn? hizada oldu?undan emin olmak ?nemlidir. ?nternet h?z?n?z?n ne kadar h?zl? oldu?u, foto?raflar? ne kadar h?zl? g?rüntüleyebilece?inizi, dosya yükleyebilece?inizi, ekleri indirebilece?inizi ve genellikle ?evrimi?i olarak yapt???m?z günlük aktivitelerin bir?o?unu belirleyecektir.</blockquote>
</li>
<li class="content-wrap">
<img src="/img/check.png">
<h1 class="h1-cite">Neden bu h?z testini kullanmal?s?n?z?</h1>
<blockquote>Tüm DSL h?zlar?n? ücretsiz ?l?ün. 60 saniye i?inde bir indirme testi ger?ekle?tirilir. Bunu yaparken, rastgele boyuttaki veri paketleri, ba?lant?n?z arac?l???yla ev bilgisayar?na aktar?l?r. Buradan hesaplanan indirme h?z?, kontrol edilen ba?lant?ya ula??labilecek h?z hakk?nda bilgi sa?lar. DSL veya ISDN ba?lant?n?z olup olmad???na bak?lmaks?z?n - h?z testi s?ras?nda ba?lant?n?n gereksiz programlar taraf?ndan mümkün oldu?unca az yüklenmesi ?nemlidir.</blockquote>
</li>
<li>
<img src="/img/reject.png">
<h1 class="h1-cite">DSL testi ne i?in kullan?lamaz?</h1>
<blockquote>Hat testimiz 0 do?ru sonu?lar veremez. Bununla birlikte, transfer oranlar?n?n nispeten iyi bir tahmini i?in de?erler ?ok yard?mc? olabilir. Bunun temel nedeni, ?l?üm üzerinde az ?ok büyük etkisi olan bir?ok parametrenin sürekli de?i?ebilmesidir. ?l?üm sonucu, DSL sa?lay?c?n?z i?in kan?t olarak kullan?lamaz. ?l?üm sonu?lar? i?in garanti verilmez. Hizmet kal?c? olarak mevcut de?ildir.</blockquote>
</li>
<li>
<img src="/img/band.png">
<h1 class="h1-cite">Bant geni?li?i nedir?</h1>
<blockquote>Bant geni?li?i, internet dünyas?nda verilerin aktar?lma, yüklenme veya indirilme oran?n? ifade etmek i?in kullan?lan bir terimdir. Ancak bilgisayar?n?z?n ger?ek h?z? yaln?zca bant geni?li?ine de?il, i?lemcisine de ba?l?d?r. Yava? bir i?lemci ile yüksek bant geni?li?i, dü?ük performans anlam?na gelir. Yava? bant geni?li?ine sahip yüksek i?lemci kalitesi de dü?ük performans anlam?na gelir. Mü?terilerin internet ba?lant?lar?n?n h?z?n? düzenli olarak kontrol edebilmeleri i?in bant geni?li?i h?z testi sunan bir?ok ?evrimi?i ma?aza var. Sadece ücretsiz olarak tekliflerinden yararlan?n ve bilgisayar?n?z?n neler oldu?unu g?rün.</blockquote>
</li>
</ul>
</div>
uj5u.com熱心網友回復：
您可以使用 css flex ( https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox )。
您需要將 ul 設定為 flex 元素并允許 flex 內容分成新行。
display: flex;
flex-wrap: wrap;
然后設定 li 的 flex 屬性，使 li 占據寬度的 1/3：
flex: 0 0 33.3333%;
為了完整flex: 0 0 33.3333%;起見，是以下的簡寫：
flex-shrink: 0;
flex-grow: 0;
flex-basis: 33.3333%;
還可以將瀏覽器的默認邊距重置blockquote為使所有內容都適合。
我把所有東西放在下面的一個片段中。
ul {
display: flex;
flex-wrap: wrap;
}
ul li {
flex: 0 0 33.33%;
}
blockquote {
margin: 0;
}<div class="container">
<ul>
<li>
<img src="/img/snail.png">
<h1 class="h1-cite">?nternetim neden yava??</h1>
<blockquote>Herkes internet dehas? de?ildir, ancak hi? kimse sayfalar?n yüklenmesini, videolar?n oynat?lmas?n? veya sosyal medyadan en son bilgileri almay? beklemeyi sevmez. ?nternetiniz yava?sa, bunun olmas?n?n birka? nedeni olabilir. Sorunun internetiniz
mi yoksa bilgisayar?n?zla ilgili bir sorun mu oldu?unu belirlemenin en kolay yolu h?z?n?z? test etmektir. Buna iki k?s?m dahildir: yükleme h?z?, bir web sitesine resim ve video yükleme h?z? ve indirme h?z?, ba?ka bir yerden ne kadar h?zl? bilgi
ald???n?z. Hi? kimse bir video arabelle?ini saatlerce tekrar tekrar izlemek istemez. En sevdi?iniz resimleri sosyal medyaya yükleyememenin hayal k?r?kl???n? hepimiz biliyoruz. Sorunun internet hizmetinizde olup olmad???n? anlamak i?in h?z?n?z?
test etmeniz gerekir.</blockquote>
</li>
<li>
<img src="/img/quest.png">
<h1 class="h1-cite">Ne yapmal?y?m?</h1>
<blockquote>?lk ve en ?nemli ad?m internet h?z?n?z? test etmektir; bu, sorunun bilgisayar?n?z, a??n?z veya internet servis sa?lay?c?n?zla ilgili olup olmad???n? anlaman?za yard?mc? olacakt?r. Bir h?z testi ??zümü se?erken güvenilir bir hizmet se?mek ?nemlidir,
?ünkü yanl?? sonu?lar daha fazla hayal k?r?kl???na neden olabilir ve üretkenli?i geciktirebilir. H?z Testi Me, internet h?z?n?z? ?l?mek i?in i?eri?e h?zl? eri?im sa?lar, bu da sonu?lar? indirme ve yükleme h?zlar?na do?ru bir ?ekilde b?lerek yaln?zca
ana soruna odaklanman?za olanak tan?r.</blockquote>
</li>
<li>
<img src="/img/rocket.png">
<h1 class="h1-cite">?nternet H?z? Neden Bu Kadar ?nemli?</h1>
<blockquote>?nternet h?z?, ?al??man?n, al??veri? yapman?n veya sadece ?evrimi?i e?lenmenin kritik bir bile?enidir. ?nternet h?z?n?z? arada bir internet h?z testi ile kontrol etmek, internet ba?lant?n?z?n ?dedi?iniz internet h?z?yla ayn? hizada oldu?undan emin
olmak ?nemlidir. ?nternet h?z?n?z?n ne kadar h?zl? oldu?u, foto?raflar? ne kadar h?zl? g?rüntüleyebilece?inizi, dosya yükleyebilece?inizi, ekleri indirebilece?inizi ve genellikle ?evrimi?i olarak yapt???m?z günlük aktivitelerin bir?o?unu belirleyecektir.</blockquote>
</li>
<li class="content-wrap">
<img src="/img/check.png">
<h1 class="h1-cite">Neden bu h?z testini kullanmal?s?n?z?</h1>
<blockquote>Tüm DSL h?zlar?n? ücretsiz ?l?ün. 60 saniye i?inde bir indirme testi ger?ekle?tirilir. Bunu yaparken, rastgele boyuttaki veri paketleri, ba?lant?n?z arac?l???yla ev bilgisayar?na aktar?l?r. Buradan hesaplanan indirme h?z?, kontrol edilen ba?lant?ya
ula??labilecek h?z hakk?nda bilgi sa?lar. DSL veya ISDN ba?lant?n?z olup olmad???na bak?lmaks?z?n - h?z testi s?ras?nda ba?lant?n?n gereksiz programlar taraf?ndan mümkün oldu?unca az yüklenmesi ?nemlidir.</blockquote>
</li>
<li>
<img src="/img/reject.png">
<h1 class="h1-cite">DSL testi ne i?in kullan?lamaz?</h1>
<blockquote>Hat testimiz 0 do?ru sonu?lar veremez. Bununla birlikte, transfer oranlar?n?n nispeten iyi bir tahmini i?in de?erler ?ok yard?mc? olabilir. Bunun temel nedeni, ?l?üm üzerinde az ?ok büyük etkisi olan bir?ok parametrenin sürekli de?i?ebilmesidir.
?l?üm sonucu, DSL sa?lay?c?n?z i?in kan?t olarak kullan?lamaz. ?l?üm sonu?lar? i?in garanti verilmez. Hizmet kal?c? olarak mevcut de?ildir.</blockquote>
</li>
<li>
<img src="/img/band.png">
<h1 class="h1-cite">Bant geni?li?i nedir?</h1>
<blockquote>Bant geni?li?i, internet dünyas?nda verilerin aktar?lma, yüklenme veya indirilme oran?n? ifade etmek i?in kullan?lan bir terimdir. Ancak bilgisayar?n?z?n ger?ek h?z? yaln?zca bant geni?li?ine de?il, i?lemcisine de ba?l?d?r. Yava? bir i?lemci ile
yüksek bant geni?li?i, dü?ük performans anlam?na gelir. Yava? bant geni?li?ine sahip yüksek i?lemci kalitesi de dü?ük performans anlam?na gelir. Mü?terilerin internet ba?lant?lar?n?n h?z?n? düzenli olarak kontrol edebilmeleri i?in bant geni?li?i
h?z testi sunan bir?ok ?evrimi?i ma?aza var. Sadece ücretsiz olarak tekliflerinden yararlan?n ve bilgisayar?n?z?n neler oldu?unu g?rün.</blockquote>
</li>
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/348938.html