Lehet CSS oszlop kitöltés közben is használható terjesztése adott oszlopokat?

szavazat
1

Nemrég akarják használni a remek kihasználatlan ingatlan column-fill: balance, mikor észrevettem valamit, egy kicsit furcsa. Néhány oszlopok én így terjeszthetők nézett igazán furcsa, mert az utolsó záró elemeket. Vártam valami ilyesmi:

Test Test Test Test

Test Test Test Test

Teszt

De ahelyett, hogy kaptam ezt az eredményt:

Test Test Test Test

Test Test Test

Test Test Test

Egy tervező szemszögéből, ez nem fog repülni ... vettem egy pillantást a w3 spec , és észrevette azt várják ezt az eredményt, de nem nyújt megoldást rá. Ez elgondolkodtat ott valószínűleg nem lehet konkrétan használják column-fillhogy ezt megvalósítsák, de tudom, ha van valami érdekes css trükk tudok használni Ehhez akár együtt column-fillvagy grid, vagy flexboxhelyette.

Ne feledje : ezek 4 oszlopot 3 sorban elhelyezett, nem 3 sorok 4 oszlopból áll. Tudom, csak az egyik szülő rács várnánk sorok először. Továbbá, flex-wrapegy max-heightlett volna egy hasonló kérdés, mint a fenti, és ez lenne a kevésbé rugalmas, hiszen szükség lenne egy explicit magasságot.

Feltételezve, hogy a következő HTML, lehet ezt tenni anélkül, hogy további sablont script?

<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>
A kérdést 10/10/2019 00:37
a forrás felhasználó
Más nyelveken...                            


2 válasz

szavazat
1

A rövid válasz: nem, ez nem lehetséges column-fill, és nem tudja használni semmit mellett sem. Volt egy megérzésem.

Szerint a w3 spec várnak ezt az eredményt, és úgy tűnik, a column-fillszállodában nincs alternatívája, hogy áramoljon másképp.

Amint azt LGSon a megjegyzéseket, akkor flexbox helyette . Beállíthatjuk az oszlopok száma a flexboxhasználatával egyszerűen százalékos szélességű egyes elemeket. A legfontosabb különbség, flexboxforgalmazza a terméket eltérően column-fill, pontosan a kívánt módon szerepel ez a kérdés.

*{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>

Válaszolt 10/10/2019 20:44
a forrás felhasználó

szavazat
0

Akkor használd ezt a kódot

   
<!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>

Válaszolt 10/10/2019 11:36
a forrás felhasználó

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