CSS sütunu doldurma belirli sütunları dağıtırken kullanılabilir mi?

oy
1

Geçenlerde özelliği altında kullanılan Nifty kullanmaya çalışıyordu column-fill: balanceben biraz tuhaf bir şey fark. Ben bu şekilde dağılmış olan sütunlardan bazıları çünkü son sondaki öğelerin gerçekten tuhaf görünüyordu. Böyle bir şey bekliyordum:

Deney Deney Deney Deney

Deney Deney Deney Deney

Testi Testi

Ama bunun yerine böyle bir sonuç var:

Deney Deney Deney Deney

Deney Deney Deney

Deney Deney Deney

Bir tasarımcının bakış açısıyla, yani sinek gitmeyecek ... Ben bir göz attım w3 spec ve bu sonucu bekliyoruz, ancak bunun için hiçbir çözüm sunmak ettim. Bu bana açıkça kullanmak için hiçbir şekilde muhtemelen orada düşündürüyor column-fillBunu gerçekleştirmek için, ama ben yanında ya bunu gerçekleştirmek için kullanabileceğiniz bazı ilginç css hile var mı acaba column-fillveya gridveya flexboxonun yerine.

Unutmayın : Bunlar 4 ile kolonlar 3 satır her değil, 3 ile satırlar 4 sütunlar, her. Sadece bir ebeveyn ızgara ilk satırları beklenebilir biliyorum. Ayrıca, flex-wrapbir ile max-heightyukarıdaki gibi benzer bir sorun olurdu ve açık bir yüksekliğe gerektirecektir beri daha az esnek olacaktır.

Aşağıdaki HTML varsayarsak, bu ek şablon komut dosyası olmadan yapılabilir?

<div class=container>
  <p class=item>Test</p>
  <p class=item>Test</p>
  <p class=item>Test</p>
  <p class=item>Test</p>
  <p class=item>Test</p>
  <p class=item>Test</p>
  <p class=item>Test</p>
  <p class=item>Test</p>
  <p class=item>Test</p>
  <p class=item>Test</p>
</div>
Oluştur 10/10/2019 saat 00:37
kaynak kullanıcı
Diğer dillerde...                            


2 cevaplar

oy
1

Kısa cevap bununla mümkün değildir, hayır column-fillve siz de onunla birlikte hiçbir şey kullanamaz. Bir tahminim vardı.

Göre w3 spec , bu sonucu bekliyoruz ve göründüğü column-fillözelliği onu farklı herhangi akış yapmak için hiçbir alternatif sunar.

Yorumlarında LGSon işaret ettiği gibi, sen kullanabilirsiniz flexbox yerine . Sen ile sütun sayısı ayarlayabilirsiniz flexboxsadece her öğe üzerinde bir yüzdelik genişliğini kullanarak. Önemli fark vardır flexboxfarklı daha öğeleri dağıtır column-fillbu soruya belirtilen tam istenilen şekilde.

*{margin: 0;}

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 25%;
}
<div class="container">
  <p class="item">Test</p>
  <p class="item">Test</p>
  <p class="item">Test</p>
  <p class="item">Test</p>
  <p class="item">Test</p>
  <p class="item">Test</p>
  <p class="item">Test</p>
  <p class="item">Test</p>
  <p class="item">Test</p>
  <p class="item">Test</p>
</div>

Cevap 10/10/2019 saat 20:44
kaynak kullanıcı

oy
0

Bu kodu kullanabilirsiniz

   
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Hello, world!</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .main {
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            height: auto;
            background-color: #eeeeee;
            padding: 15px;
        }        
        .item {
            -moz-column-fill: auto;
            column-fill: auto;
            background-color: #ffffff;
        }              
    </style>
</head>
<body>
    <div class="container">
        <div class="main">
            <p class="item">Test</p>
            <p class="item">Test</p>
            <p class="item">Test</p>
            <p class="item">Test</p>
            <p class="item">Test</p>
            <p class="item">Test</p>
            <p class="item">Test</p>
            <p class="item">Test</p>
            <p class="item">Test</p>
            <p class="item">Test</p>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Cevap 10/10/2019 saat 11:36
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more