Ogni articolo di avere la stessa larghezza come l'elemento più ampia

voglio creare questo layout:Ogni articolo di avere la stessa larghezza come l'elemento più ampia

enter image description here

Quando un elemento non rientra nel contenitore, possiamo passare alla riga successiva:

enter image description here

Quando il contenitore è molto piccolo rispetto al punto più ampio, possiamo avvolgere il contenuto di multilinee

enter image description here

È molto semplice con Javascript, ecco l'esempio https://jsfiddle.net/oucxsep4/.

var choices = document.querySelectorAll('li'); 
 
var maxWidth = 0; 
 
// read 
 
for (i = 0; i < choices.length; ++i) { 
 
    maxWidth = Math.max(maxWidth, choices[i].offsetWidth) 
 
}; 
 

 
// write 
 
for (i = 0; i < choices.length; ++i) { 
 
    choices[i].style.width = maxWidth + "px"; 
 
};

ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
li{ 
 
    background: red; 
 
    float: left; 
 
    margin: 5px; 
 
}

<ul> 
 
    <li>first choice</li> 
 
    <li>choice</li> 
 
    <li>This is the wider choice</li> 
 
    <li>other choice</li> 
 
</ul>

E 'possibile farlo senza usare Javascript, solo i CSS? Ho provato con flexbox senza successo.

fonte

2015-07-01 Carlos

Flexbox non ha alcuna nozione di griglia. Gli oggetti con diverse linee di flex si comportano in modo indipendente, quindi non penso che tu possa ottenere questo risultato con la flexbox. – Oriol

È un duplicato che risponde alla tua domanda? https://stackoverflow.com/questions/42656183/how-to-set-flex-items-to-equal-width-according-to-the-item-with-the-longest-cont/42659167 –

Non è ancora possibile con il solo CSS abbinare tutte le larghezze di elementi di pari livello a quelle più ampie. Tuttavia, è possibile ottenere la maggior parte del layout desiderato con i CSS dando agli elementi dell'elenco una larghezza del 50% per creare la struttura a due colonne (width: calc(50% - 10px /* subtracts margins */);) e quindi dare loro una larghezza minima (min-width:153px; in questo esempio).

Se non si è in grado di impostare manualmente una larghezza minima nel CSS, sarà probabilmente necessario integrare il CSS con alcuni javascript per impostare la larghezza minima per tali elementi simili al proprio esempio.

ul{ 
 
    margin: 0; 
 
    padding: 5px; 
 
    list-style: none; 
 
    width:50%; 
 
    background-color: #eee; 
 
} 
 

 
ul::after { 
 
    clear: both; 
 
    content: ""; 
 
    display: block; 
 
} 
 

 
li { 
 
    background: red none repeat scroll 0 0; 
 
    display: block; 
 
    float: left; 
 
    margin: 5px; 
 
    min-width: 153px; 
 
    width: calc(50% - 10px); 
 
}

<ul> 
 
    <li>first choice</li> 
 
    <li>choice</li> 
 
    <li>This is the wider choice</li> 
 
    <li>other choice</li> 
 
</ul>

fonte

2015-07-05 06:13:54 IMI

Grazie per la risposta . È simile alla disposizione del desiderio ma non esattamente. Il numero di colonne dovrebbe essere dinamico. – Carlos

devo una soluzione brutta

https://jsfiddle.net/y5x3znqo/2/

body { 
 
    background: #ccc 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
li { 
 
    background: red; 
 
    float: left; 
 
    margin: 5px; 
 
} 
 

 
.label { 
 
    position: absolute; 
 
} 
 

 
.hide { 
 
    visibility: hidden; 
 
}

<ul> 
 
    <li> 
 
    <span class="label">first choice</span> 
 
    <span class="hide">This is the wider choice</span> 
 
    </li> 
 
    <li> 
 
    <span class="label">choice</span> 
 
    <span class="hide">This is the wider choice</span> 
 
    </li> 
 
    <li> 
 
    <span>This is the wider choice</span> 
 
    </li> 
 
    <li> 
 
    <span class="label">other choice</span> 
 
    <span class="hide">This is the wider choice</span> 
 
    </li> 
 
</ul>

L'idea è messo l'ampia articolo st in ogni scelta con visibilità: nascosto. Ciò richiede di precalcolare l'elemento più largo, ad esempio nel back-end.

fonte

2015-07-09 13:22:38 Carlos

E 'possibile utilizzando semplici css:

.list-container { 
 
    display: inline-flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
} 
 

 
.list { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.list-item { 
 
    text-transform: capitalize; 
 
    background-color: rgb(200, 30, 40); 
 
    font-size: 1.3em; 
 
    text-align: left; 
 
    padding: 10px; 
 
    margin: 1px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
}

<!DOCTYPE html> 
 

 
<div class="list-container"> 
 
    <div class="list"> 
 
    <div class="list-item">fresh figs</div> 
 
    <div class="list-item">pine nuts</div> 
 
    <div class="list-item">honey</div> 
 
    <div class="list-item">balsamic vinegar</div> 
 
    </div> 
 
</div> 
 
<div class="list-container"> 
 
    <div class="list"> 
 
    <div class="list-item">fresh figs</div> 
 
    <div class="list-item">pine nuts</div> 
 
    <div class="list-item">honey</div> 
 
    <div class="list-item">balsamic vinegar</div> 
 
    </div> 
 
</div>

fonte

2017-03-06 19:56:26 Ericky

Questo non risolve questo layout https://i.stack.imgur.com/dgILr.png – Carlos

Lo fa, devi solo avere una colonna in più come questa.(Guarda la versione edita) Ogni lista occupa la larghezza dell'elemento più grande – Ericky

Un modo per rendere questa dinamica in termini di numero di colonne? La soluzione fornita non è eccessivamente utile in alcun tipo di ambiente dinamico. Speravo di poter mettere tutto in una lista e impostare l'altezza massima nell'elenco per farla racchiudere tra più colonne, ma le dimensioni di tutto dovrebbero essere regolate automaticamente in modo da renderle uniformi. – Wade

Ogni articolo di avere la stessa larghezza come l'elemento più ampia

risposta

Problemi correlati