CSS Allineamento verticale su un floated?

Ordina per data Ordina commenti per reazioni
N

nostyn

Utente Electrum
12 Gennaio 2017
284
25
83
126
Premessa: si tratta di una domanda di carattere didattico, sono consapevole che nella realizzazione di una pagina e' raramente necessario un simile approccio.

Sto cercando di allineare verticalmente i due paragrafi sulla destra, ma in modo che occupino comunque il 100% dell'altezza e mantengano il padding pre-impostato.
Lo scopo? Voglio che il div con classe background si adatti all'altezza maggiore tra il div child e la lista. Al contempo i paragrafi devono assolutamente avere il 100% dell'altezza.
Ho impostato la cosa nel seguente modo:
HTML: 
...
<div class="background">
    <div class ="box"></div>
    <ul class="list">
        <li><p>foo</p></li>
        <li><p>bar</p></li>
    </ul>
</div>
...
CSS: 
.background {
  width: 50%;
  display: flex;
}

.list{
  display: inline-block;
  list-style-type: none;
  margin-left: auto;
}

.list li {
  float: left;
  height: 100%;
}

.list li p {
  display: block;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

Il foglio stile e' privo dei colori per facilitarne la lettura, ho preparato una demo apposita dove potete provare la soluzione: https://jsfiddle.net/nostyn/n4doz2u6/3/
Come ho anche commentato, ho impostato, al div child, una larghezza ed altezza, ma la grandezza del suo contenuto non e' conosciuta a priori!
 
  • Mi piace
Reazioni: biotek_
nostyn ha detto:
Premessa: si tratta di una domanda di carattere didattico, sono consapevole che nella realizzazione di una pagina e' raramente necessario un simile approccio.

Sto cercando di allineare verticalmente i due paragrafi sulla destra, ma in modo che occupino comunque il 100% dell'altezza e mantengano il padding pre-impostato.
Lo scopo? Voglio che il div con classe background si adatti all'altezza maggiore tra il div child e la lista. Al contempo i paragrafi devono assolutamente avere il 100% dell'altezza.
Ho impostato la cosa nel seguente modo:
HTML: 
...
<div class="background">
    <div class ="box"></div>
    <ul class="list">
        <li><p>foo</p></li>
        <li><p>bar</p></li>
    </ul>
</div>
...
CSS: 
.background {
  width: 50%;
  display: flex;
}

.list{
  display: inline-block;
  list-style-type: none;
  margin-left: auto;
}

.list li {
  float: left;
  height: 100%;
}

.list li p {
  display: block;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

Il foglio stile e' privo dei colori per facilitarne la lettura, ho preparato una demo apposita dove potete provare la soluzione: https://jsfiddle.net/nostyn/n4doz2u6/3/
Come ho anche commentato, ho impostato, al div child, una larghezza ed altezza, ma la grandezza del suo contenuto non e' conosciuta a priori!
Clicca per espandere...
Il tuo approccio non è male, ma con float si rischia spesso di andare in overflow di contenuto orizzontale. Inoltre, tramite float l'elemento non rientra più nel normale flow di contenuto della pagina, per questo non viene completamente visto da un eventuale contenitore padre (si utilizzano metodologie di lavoro su ::after per reimpostare il flow normale tramite clear, ma sinceramente non mi ricordo come fare). Personalmente non lo utilizzo da anni ormai, in quanto prediligo l'utilizzo di flexbox, che consentono con molta meno fatica di avere ottimi risultati e decisamente più controllabili.
Ti ho preparato questo esempio, partendo dal tuo problema, per mostrarti quanto siano potenti :)
codepen.io

Esempio con FlexBox

...
codepen.io codepen.io
 
  • Mi piace
Reazioni: nostyn
Dazorn ha detto:
Inoltre, tramite float l'elemento non rientra più nel normale flow di contenuto della pagina
Clicca per espandere...
Hai ragione, scusa, ho dimenticato il clearfix nella fretta..

Dazorn ha detto:
in quanto prediligo l'utilizzo di flexbox, che consentono con molta meno fatica di avere ottimi risultati e decisamente più controllabili.
Clicca per espandere...
Sono assolutamente daccordo e infatti mi trovo molto bene ad utilizzare i flexbox, anche nello stesso esempio il contenitore esterno e' un flexbox per poi permettermi di allineare verticalmente il box, nel caso sia piu' basso della lista . Tuttavia rimane il mio problema principale, ovvero allineare al centro quel paragrafo senza perdere di " elasticita' ", e' possibile?
 
Ultima modifica:
Ciao ho letto il topic e mi hai fatto incuriosire, cosi anche io ho fatto qualcosina spero di aver capito bene non rispecchia il metodo di Dazorn che con tanto di capello mi permetto di dire che abbastanza colto in materia, comunque dai un attimo un'occhiata a questo https://jsfiddle.net/z0pm7k9t/1/. Mi scuso se non è il risultato che volevi, eventualmente mi puoi comunque dare qualche dettaglio in piu per trovare una soluzione.
Un salutone!

Ps: il testo del div con classe box viene centrato con vertical-align:middle cosi dovrebbe trovarsi sempre al centro nonostante l'altezza degli elementi child dell'elemento con la classe background.

Potresti utilizzare il metodo di Dazorn ed implementare il mio per quanto riguarda la formattazione del testo sempre nel mezzo del div :D
 
  • Mi piace
Reazioni: nostyn e Dazorn
biotek_ ha detto:
Ciao ho letto il topic e mi hai fatto incuriosire, cosi anche io ho fatto qualcosina spero di aver capito bene non rispecchia il metodo di Dazorn che con tanto di capello mi permetto di dire che abbastanza colto in materia, comunque dai un attimo un'occhiata a questo https://jsfiddle.net/z0pm7k9t/1/. Mi scuso se non è il risultato che volevi, eventualmente mi puoi comunque dare qualche dettaglio in piu per trovare una soluzione.
Un salutone!

Ps: il testo del div con classe box viene centrato con vertical-align:middle cosi dovrebbe trovarsi sempre al centro nonostante l'altezza degli elementi child dell'elemento con la classe background.

Potresti utilizzare il metodo di Dazorn ed implementare il mio per quanto riguarda la formattazione del testo sempre nel mezzo del div :D
Clicca per espandere...
Mi devi scusare, siete stati entrambi gentilissimi ed io oggi ho veramente tante cose per la testa; rispondendo a un thread ed un altro ho dimenticato di darti una risposta:oddio: . In serata analizzo il codice e ti do' un feedback come si deve; pero' ho dato un'occhiata rapida alla preview e ho notato che la lista e' disposta verticalmente e (per quanto sia una soluzione stilistica che mi aggrada), nel mio caso specifico ho la stretta necessita' di disporla orizzontalmente e allineare il contenuto dei list items verticalmente al centro. Questa e' anche colpa mia: non sono stato attentissimo nell'elencare le specifiche, me ne scuso con entrambi. Nel caso ci sia ancora qualche dubbio su cio' che ho in mente di fare, (perche' credo di non essermi ancora espresso bene) scrivetemi eventuali domande e precisero' in serata.
 
  • Mi piace
Reazioni: biotek_
Ultima modifica:
nostyn ha detto:
Mi devi scusare, siete stati entrambi gentilissimi ed io oggi ho veramente tante cose per la testa; rispondendo a un thread ed un altro ho dimenticato di darti una risposta:oddio: . In serata analizzo il codice e ti do' un feedback come si deve; pero' ho dato un'occhiata rapida alla preview e ho notato che la lista e' disposta verticalmente e (per quanto sia una soluzione stilistica che mi aggrada), nel mio caso specifico ho la stretta necessita' di disporla orizzontalmente e allineare il contenuto dei list items verticalmente al centro. Questa e' anche colpa mia: non sono stato attentissimo nell'elencare le specifiche, me ne scuso con entrambi. Nel caso ci sia ancora qualche dubbio su cio' che ho in mente di fare, (perche' credo di non essermi ancora espresso bene) scrivetemi eventuali domande e precisero' in serata.
Clicca per espandere...

Ah be tranquillo, non ti preoccupare allora, li vedi in verticale perche il float è none
Se ho capito bene vorresti un risultato del genere ? https://jsfiddle.net/1neumfwt/1/
i paragrafi all'interno degli elementi
Codice: 
<li>
vengono centrati sempre nel mezzo relativamente alla elasticità proporzionata.
 
Top Bottom
Indietro