html - blocco - centrare un p




Allineamento del testo reattivo in base alla posizione (3)

Esiste davvero una soluzione solo CSS che funziona esattamente come hai presentato nelle immagini allegate della tua domanda. Tuttavia potrebbe non essere una risposta veramente completa in quanto dipende da un fattore cruciale: tutti gli elementi del menu di primo livello hanno la stessa larghezza. Ora questo è il caso mostrato nelle immagini allegate, ma potrebbe non essere vero per la tua effettiva implementazione.

Usando il selettore nth-child CSS3 con la variabile n puoi scegliere come target ogni 3 °, o 4 ° elemento del menu di livello superiore. Gli oggetti mirati possono essere facilmente abbinati per far sì che i menu a discesa siano allineati correttamente. Pertanto, per una soluzione codificata su una singola schermata, si conterebbe il numero di voci di menu di livello superiore in una riga e impostato come moltiplicatore n . Ad esempio, se il tuo menu viene spostato dopo 6 elementi, per definire l'ultimo elemento di ogni riga devi impostare qualcosa come:

.top-level-item:nth-child(6n) > .dropdown-container > .sub-item {
    float: right;
    clear: right;
}

o comunque la tua implementazione effettiva ha bisogno di stile un menu allineato a destra.

Naturalmente, questo dipende da tutte le voci di menu che hanno la stessa larghezza. Se il tuo menu ha più di 2 righe e le tue voci di menu hanno ampiezze diverse, potresti avere un numero variabile di elementi in ogni riga, nel qual caso il selettore nth-child non dovrebbe necessariamente indirizzare il figlio finale di ogni riga.

Ora per fare in modo che funzioni per qualsiasi dimensione dello schermo, se tutti gli elementi di livello superiore hanno la stessa larghezza fissa, dobbiamo quindi scoprire quanti oggetti ci saranno per riga indipendentemente dalla larghezza della finestra. Purtroppo, calc() è troppo limitato per questa applicazione. Tuttavia, se gli articoli principali hanno una larghezza fissa e sappiamo qual è la larghezza, possiamo usare una serie di istruzioni @media per ogni caso.

Ad esempio, diciamo che con i margini e la larghezza insieme, ogni elemento di livello superiore ha una larghezza di 230 px. Ciò significa che se la larghezza della finestra è inferiore a 230 * 3 = 690 px, ci saranno 2 elementi in ogni riga. Se la larghezza della finestra è inferiore a 230 * 4 = 920 px e superiore a 690 px, ci saranno 3 elementi in ogni riga. E così via, alla dimensione della finestra più grande che pensi di aver bisogno. Utilizzando l'esempio precedente nth-child , la serie di query multimediali per indirizzare ogni dimensione di riga sarebbe simile a qualcosa:

@media (max-width: 690px) {
    /* less than 3 items per row */
    .top-level-item:nth-child(2n) > .dropdown-container > .sub-item {
        float: right;
        clear: right;
    }
}
@media (max-width: 920px) and (min-width: 691px) {
    /* less than 4 items per row */
    .top-level-item:nth-child(3n) > .dropdown-container > .sub-item {
        float: right;
        clear: right;
    }
}
@media (max-width: 1150px) and (min-width: 921px) {
    /* less than 5 items per row */
    .top-level-item:nth-child(4n) > .dropdown-container > .sub-item {
        float: right;
        clear: right;
    }
}
...
/* and so on */

Una penna che mostra un'implementazione di questo è su https://codepen.io/jla-/pen/GYJQMq . Tieni presente che JavaScript è presente solo per alternare i menu a discesa quando viene fatto clic.

Per le voci di menu di livello superiore che hanno larghezza variabile o se hanno la stessa larghezza ma non si sa quale valore sia, non penso che il CSS corrente sia abbastanza potente da fare ciò che si vuole. Idealmente dovresti fare qualcosa come .top-level-item:nth-child(calc((100vw/--itemwidth)-(100vw%--itemwidth)) per ottenere il numero di elementi in una riga, ma penso che il CSS sia molto lontano da quel tipo di potere.

Penso che la risposta a questo non sia che, prima di apportare cambiamenti più drastici, voglio assicurarmi di non aver perso qualcosa.

C'è un mezzo, solo tramite CSS, per modificare la giustificazione di un elemento e dei suoi figli in base al fatto che sia orientato più verso sinistra o destra dello schermo?

Non esiste una proprietà diretta per questo, ma sto vedendo se mi sono perso qualche metodo simile a un hack che forse coinvolge pseudo selettori o elementi.

Dimostrazione della situazione attuale:

Ho una barra di navigazione <ul> che fornisce una combinazione di <a> collegamenti e alcuni contenitori <ul> nidificati per i menu a discesa sul passaggio del mouse. Abbastanza standard e funziona bene su schermi più ampi:

Se è disponibile meno spazio sullo schermo, il navigatore passa alla riga successiva come previsto. Questo è un risultato desiderabile. Tuttavia, a volte i menu a discesa possono essere troncati fuori dallo schermo, il che non è molto auspicabile:

Piuttosto che fornire uno stile molto diverso per i dispositivi mobili (il mio piano di fallback è di presentare i menu a discesa come scelte di dialogo tramite postion: fixed su schermi più piccoli, piuttosto che sulla position: absolute come sono adesso), ho potuto sistemare il mio situazione attraverso i miei elementi essendo consapevoli della loro avventura fuori dallo schermo e della necessità di text-align: right e possibilmente regolare il loro posizionamento assoluto per ancorare a destra del genitore <li> piuttosto che a sinistra, così come sono ora:

Posso gestirlo tramite javascript ma ho già abbastanza eventi listener e voglio fornire una risposta più elegante che eviti javascript. Se non esiste un metodo solo css, potrei usare l'alternativa a posizione fissa come un piano b.

chiarimenti:

Mentre inizialmente mi aspettavo di utilizzare le query multimediali per risolvere questa situazione sui dispositivi mobili, mi sono reso conto che, anche se per me è evidente solo su schermi di dimensioni minori, questo non è qualcosa che posso dare per scontato.

Ad esempio, il numero di elementi Nav potrebbe aumentare in futuro e potrebbe presentare questa situazione a qualsiasi dimensione dello schermo. Ha solo bisogno di un menu a discesa per essere a destra dello schermo.

Inoltre, non posso garantire che un dispositivo che devo ancora testare non stia replicando il problema a una dimensione che non mi sarei aspettato.

Il mio punto è che non vedo un modo in cui posso fare affidamento su query multimediali di dimensioni dello schermo. Penso che la mia soluzione, se presente, debba rispondere alla posizione dell'elemento sullo schermo, motivo per cui penso che potrei essere sfortunato per una soluzione non javascript.

In secondo luogo: si supponga che il contenuto sia dinamico e, come qualsiasi pagina capace, elementi che dovrebbero cambiare dinamicamente le proprietà per adattarlo, fare (come l'ordine degli oggetti di navigazione, il conteggio, le larghezze, ecc.). Dovrei riferire a chiunque cerchi caveat più sottili in quest'area alla domanda iniziale: esiste un mezzo, solo tramite CSS, per modificare la giustificazione di un elemento e dei suoi figli in base al fatto che sia orientato più verso sinistra o destra dello schermo?

Codice di esempio:

Come richiesto, ecco il codice di esempio. Non penso che sia una buona idea includerlo in questo scenario (anche se capisco che è importante nella maggior parte delle domande) poiché toglie che la domanda sia per lo più estranea al mio codice specifico e molto più legata alla messa in discussione della capacità del css di modificare dinamicamente un attributo (s) in base alla posizione dello schermo o consapevolezza dei bordi dello schermo - in qualsiasi scenario - quindi la mia preferenza per illustrare la domanda.

Il codice è una versione semplificata della mia ma la domanda potrebbe essere stata posta con quasi tutte le variazioni di un normale e familiare <ul> menu di navigazione che fornisce i menu a discesa tramite :hover in CSS.

Con questo in mente, se stai cercando di risolvere la questione lavorando attraverso il mio codice, potrei aver descritto male la mia situazione. Credo di essere abbastanza esperto nelle estensioni che i CSS possono attualmente essere spinti a credere che la risposta sia "non è possibile senza javascript" ma sto solo assicurando di non aver perso un'intelligente soluzione / hack per alterare dinamicamente gli attributi degli elementi tramite CSS basato sulla posizione dello schermo (mi dispiace per la ripetizione della domanda - voglio solo assicurarmi che sia compreso, seguendo alcuni commenti). Grazie.

<ul class="nav nav__container">

    <li><a class='nav nav__item' href="#">Standard Link</a></li>
    <li><a class='nav nav__item' href="#">Standard Link</a></li>
    <li><a class='nav nav__item' href="#">Standard Link</a></li>
    <li><a class='nav nav__item' href="#">Standard Link</a></li>
    <li class='nav nav__item nav__item--dropdown'><li><a href="#">Dropdown Label</a></li>
        <ul class='nav nav__dropdown'>
            <li><a class='nav nav__item nav__item--dditem' href="#">Dropdown Link</a></li>
            <li><a class='nav nav__item nav__item--dditem' href="#">Dropdown Link</a></li>
            <li><a class='nav nav__item nav__item--dditem' href="#">Dropdown Link</a></li>
        </ul>
    </li>

</ul>

Può essere una query multimediale con flex può aiutarti se la usi correttamente .. Ho provato a replicare il tuo problema su jsfiddle.

<div id="menu-container">
  <div class="menu"></div>
  <div class="menu"></div>
  <div class="menu">
      <div id="sub-menu-container">
          <div class="sub-menu" id="sub-menu1"></div>
          <div class="sub-menu" id="sub-menu2"></div>
          <div class="sub-menu" id="sub-menu3"></div>
          <div class="sub-menu" id="sub-menu4"></div>
      </div>
  </div>
  <div class="menu"></div>
</div>

CSS

.menu{
  border-radius:15px;
  background-color: #00ab9e;
  width:120px;
  height:50px;
  border: 1px solid #01eae9;
  display:inline-block;
  margin:5px;
  position:relative;
  vertical-align:top;
}
#sub-menu-container{
  margin-top:50px;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
}
.sub-menu{
  border-radius:15px;
  background-color: #ffb12a;
  width:120px;
  height:50px;
  border: 1px solid #01eae9;
  margin-top:5px;
}
#sub-menu2{
  width:150px;
}

#sub-menu3{
  width:200px;
}

@media only screen and (max-width: 495px) {
    #sub-menu-container {
      align-items: flex-end;
    }
}
@media only screen and (max-width: 420px) {
    #sub-menu-container {
      align-items: flex-start;
    }
}

https://jsfiddle.net/nimittshah/7bsf1r3v/

Grazie


Sembra la risposta alla domanda principale:

C'è un mezzo, solo tramite CSS, per modificare la giustificazione di un elemento e dei suoi figli in base al fatto che sia orientato più verso sinistra o destra dello schermo?

è no.

Come risposta di follow-up più approfondita, ho pensato di menzionare che non sto andando con il mio piano originale B dei menu a discesa per lo styling da correggere con schermi di dimensioni più piccole. Ho accennato a questo nella mia domanda, ma è diventato più evidente che non posso fare affidamento sulla dimensione dello schermo per determinare se un menu a discesa verrà troncato in futuro. Quindi, dato che ora le richieste multimediali sono escluse, ho bisogno di un'altra soluzione se voglio assicurarmi che non fornisca una soluzione sciatta a nessun dispositivo.

Il che mi lascia con javascript. Stavo cercando di evitarlo ma, in questa fase, sarei testardo a farlo, visto il risultato.

Metodo

In caso contrario è utile a chiunque altro, ho usato jquery per fornire un listener per il passaggio del mouse sui menu a discesa. La logica è che tutti gli elementi di una determinata classe sono garantiti per avere un menu a discesa, composto da un <ul> di un'altra classe. Quindi posso bersagliare entrambi facilmente.

Potrei controllare se il menu a discesa è a destra oa sinistra dello schermo. Questo funzionerebbe benissimo. Essendo pignolo, preferirei che il menu rimanesse giustificato a sinistra a meno che non fosse a circa 200 pixel dalla destra dello schermo - una soglia sicura per il mio contenuto dinamico. Potrei andare a misurare ogni larghezza di dropdown e usarla come soglia se dovessi incontrare problemi.

Mettendo tutto questo insieme. Se passa il mouse su un menu a discesa e si trova a meno di 200 pixel dalla destra dello schermo, entrambi giustificano il suo menu a destra e posiziona in modo assoluto il menu a discesa sul lato più a destra della relativa etichetta del menu principale / trigger (come ho mostrato nelle mie illustrazioni originali). Ci sono versioni più flessibili e più brevi di questo e non c'è molto altro lavoro da fare senza jquery per chiunque eviti la libreria:

Codice JS

$(nav).on('mouseover', '.dropdown', function() {

    var dropdownlist = $(this).children('ul');
    var screenWidth = $(window).width();
    var parentOffsetLeft = $(this).offset().left;
    var spaceRight = screenWidth - parentOffsetLeft;

    if (spaceRight < 200) {

        $(dropdownlist).css('text-align', 'right');
        $(dropdownlist).css('right', '0');
        $(dropdownlist).css('left', 'initial');

    } else {

        $(dropdownlist).css('text-align', 'left');
        $(dropdownlist).css('left', '0');
        $(dropdownlist).css('right', 'initial');

    }

});

Usando questo javascript, posso ricreare la soluzione illustrata nella domanda.





css