CSS coluna de preenchimento pode ser usado enquanto distribui colunas específicas?

votos
1

Recentemente eu estava tentando usar o bacana propriedades subutilizadas column-fill: balancequando notei algo um pouco estranho. Algumas das colunas que eu tinha distribuídas desta forma parecia realmente estranho, porque dos últimos itens de fuga. Eu estava esperando algo como isto:

Teste teste teste teste

Teste teste teste teste

Teste TESTE

Mas em vez disso eu tenho um resultado como este:

Teste teste teste teste

Teste teste teste

Teste teste teste

Do ponto de vista de um designer, que não vai voar ... Eu levei um olhar para a especificação w3 e notei que eles esperam este resultado, mas eles não oferecem nenhuma solução para ele. Isso me faz pensar que provavelmente não há maneira de usar explicitamente column-fillpara fazer isso, mas eu me pergunto se há algum truque css interessante que eu possa usar para alcançar este objetivo, seja ao lado column-fillou com gridou flexboxem vez disso.

Lembre-se : estes são 4 colunas com 3 linhas cada, e não 3 linhas com 4 colunas cada. Sei apenas uma grade de pai esperaria linhas em primeiro lugar. Além disso, flex-wrapcom um max-heightteria um problema semelhante como a acima, e seria menos flexível, uma vez que exigiria uma altura explícita.

Assumindo o seguinte HTML, isso pode ser feito sem scripting modelo adicional?

<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>
Publicado 10/10/2019 em 00:37
fonte usuário
Em outras línguas...                            


2 respostas

votos
1

A resposta curta não é, isso não é possível com column-fill, e você não pode usar qualquer coisa ao lado dele também. Eu tinha um palpite.

De acordo com a especificação w3 , eles esperam este resultado, e parece que a column-fillpropriedade não oferece nenhuma alternativa para fazê-la fluir de forma diferente.

Como apontado por LGSon nos comentários, você pode usar flexbox em vez . Você pode definir o número de colunas com flexboxsimplesmente usando uma largura percentual sobre cada item. A principal diferença é, flexboxdistribui os itens de forma diferente do que column-fill, exatamente da maneira desejada afirmou nesta questão.

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

Respondeu 10/10/2019 em 20:44
fonte usuário

votos
0

Você pode usar este código

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

Respondeu 10/10/2019 em 11:36
fonte usuário

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