Struttura a 4 elementi con larghezza automatica

**effettoMapet** · 14-04-2024, 13:41

Ciao e grazie a tutti per l'interesse.

Per comprendere il mio obiettivo allego un'immagine che vi chiedo di analizzare.
Desidero creare una struttura dove inserisco 4 elementi,
a questi assegno la larghezza solo ad uno (D) mentre i restanti A, B, C, devono adattarsi alla spazio restante andando ad occupare l'intera riga disponibile (quindi A, B, C devono restare sempre uno sotto l'altro indifferentemente dal proprio contenuto).

Pare una sciocchezza, ma io riesco ad avere un buon funzionamento solo lavorando con due elementi es: A e D.

NB. A mio avviso per risolvere il problema bisogna creare un aggiuntivo elemento che contenga al suo interno A, B, C, cosi facendo lavorando nelle impostazioni di questo nuovo elemento (chiamiamolo X) più D riesco. Ma io NON voglio creare nuovi div, non voglio appesantire la struttura del html.

Grazie a tutti

**Vincent.Zeno** · 14-04-2024, 16:18

Originariamente inviata da effettoMapet

Ma io NON voglio creare nuovi div, non voglio appesantire la struttura del html.

allora rinuncia

scherzi a parte, è proprio quello che devi fare

**KillerWorm** · 15-04-2024, 01:10

Ciao, giusto un mio personale parere prima di darti qualche soluzione:
Per quanto hai esposto, il termine "appesantire" penso sia spropositato se si tratta giusto di aggiungere qualche elemento per gestire in modo più logico e semplice il layout HTML.
Cerca di capirmi, siamo nell'era del 6g, della fibra, di connessioni ultra veloci e sempre più performanti; penso che qualche div in più o in meno NON faccia alcuna reale differenza a livello di "peso HTML".

Ti do comunque una possibile soluzione: potresti usare le "grid CSS".

Qui un esempio minimo secondo il tuo allegato:

codice HTML:

<!DOCTYPE HTML>
<html lang="it">
  <head>
    <title>Esempio</title>
    <style>

      html, body {
        height: 100%;
        margin: 0;
      }

      .divA { grid-area: a; background-color: #dadada; }
      .divB { grid-area: b; background-color: #c7c8c2; }
      .divC { grid-area: c; background-color: #dadada; }
      .divD { grid-area: d; background-color: #e9b850; }

      .container {
        display: grid;
        grid-template: 
          'a d'
          'b d'
          'c d' / auto 300px;
        grid-gap: 5px;
        width: 100%;
        height: 100%;
      }

      .container > div {
        text-align: center;
        font-size: 30px;
      }

    </style>
  </head>
  <body>
    <div class="container">
      <div class="divA">A</div>
      <div class="divB">B</div>
      <div class="divC">C</div>
      <div class="divD">D</div>
    </div> 
  </body>
</html>

Non ti nego che dietro c'è un mondo; se vuoi sfruttare al meglio questo strumento c'è da studiarci su. Fai magari qualche ricerca.

**Vincent.Zeno** · 15-04-2024, 02:57

Originariamente inviata da KillerWorm

Qui un esempio minimo

perché devi sempre dare la risposta migliore? perché? perché?

**slotmania** · 16-04-2024, 22:10

Certo! Capisco la tua esigenza di creare una struttura con quattro elementi, dove solo uno (D) ha una larghezza specifica, mentre gli altri (A, B, C) devono adattarsi automaticamente all’intero spazio disponibile. Senza aggiungere nuovi div, possiamo raggiungere questo obiettivo utilizzando CSS Flexbox.

Ecco come puoi farlo:

HTML Markup: Inizia con il tuo markup HTML. Assicurati di avere quattro elementi (A, B, C e D) all’interno di un contenitore principale. Ad esempio:
HTML

<div class="container">
<div class="element">A</div>
<div class="element">B</div>
<div class="element">C</div>
<div class="element">D</div>
</div>

CSS Flexbox: Aggiungi il seguente stile CSS al tuo foglio di stile:

CSS

.container {
display: flex;
flex-direction: column; /* Imposta l'orientamento verticale */
}

.element {
flex: 1; /* Fai in modo che tutti gli elementi occupino lo stesso spazio disponibile */
border: 1px solid #ccc; /* Aggiungi bordi per visualizzare gli elementi */
padding: 10px; /* Aggiungi spazio interno per una migliore leggibilità */
}

.element:nth-child(4) {
flex: 0; /* Imposta la larghezza specifica per l'elemento D */
width: 200px; /* Ad esempio, imposta la larghezza di D a 200px */
}

Il contenitore .container utilizza display: flex per creare un layout flessibile.
L’orientamento verticale è impostato con flex-direction: column.
Tutti gli elementi .element all’interno del contenitore occupano lo stesso spazio disponibile grazie a flex: 1.
L’elemento D (quarto elemento) ha una larghezza specifica impostata con flex: 0 e width: 200px (puoi personalizzare la larghezza come preferisci).
Risultato: Ora gli elementi A, B e C si adatteranno automaticamente all’intero spazio disponibile, mentre l’elemento D avrà la larghezza specificata.
Spero che questa soluzione ti sia utile! Se hai altre domande, sentiti libero di chiedere. ��

**KillerWorm** · 16-04-2024, 23:53

Originariamente inviata da slotmania

Ecco come puoi farlo:

viva chatGPT e tutto il mondo dell'AI

peccato che non sempre si ottenga una soluzione adeguata, come è questo caso.

Originariamente inviata da effettoMapet

Per comprendere il mio obiettivo allego un'immagine che vi chiedo di analizzare.

evidentemente l'AI non l'ha fatto, per questo ha mancato il bersaglio.

Non abusate dell'AI.

Saluti

Discussione: Struttura a 4 elementi con larghezza automatica

Strumenti discussione

Ricerca discussione

Visualizza

Struttura a 4 elementi con larghezza automatica

Permessi di invio