Div affiancati responsive: come

di il
3 risposte

Div affiancati responsive: come

Buongiorno a tutti!
Non so se è la categoria corretta, mi scuso nel caso.
Si tratta di layout su un tema di wordpress che è cmp in php.
Da poco mi sto muovendo nel mondo dei div.
Nella pagina articolo/home del blog (tema Tiny Forge) ho creato dei riquadri tramite div.
Inizialmente avevo posto le misure in larghezza e questo non ne consentiva la visibilità su dispositivi diversi da pc.
Ho scoperto la flessibilità con i valori percentuali.
Per quanto riguarda i div con larghezza pari alla pagina sono riuscita a renderli visibili anche su mobile, grazie ai seguenti parametri width:100% float left.
I div affiancati in una stessa riga invece non sono riuscita a renderli visibili su dispositivi.
Ho provato a dare dei valori percentuali. Ho fatto diverse prove. Per esempio with:50% float left per entrambi i div affiancati. Il risultato è che i div appaiono uno sotto l'altro su pc.
Non so proprio come risolvere. Qualcuno può gentilmente aiutarmi? Grazie

3 Risposte

  • Re: Div affiancati responsive: come

    Ciao,
    ti serve un div che faccia da contenitore e i due div da affiancare.
    Ti ho messo una media query che scatta sotto i 480px, ovviamente gestiscila in base alle tue necessità di layout.
    Ti giro il codice:

    Codice HTML
    <div class="wrap">
        <div>contenuto 1</div>
        <div>contenuto 2</div>
    </div>
    Codice CSS
    * {
       margin: 0;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing:border-box;
    }
    
    .wrap div {border: 1px solid #c0c0c0;height: 50px;width: 50%;float: left;}
    
    @media all and (max-width: 480px) 
    {
        .wrap div {width: 100%;float: none;}
    }
  • Re: Div affiancati responsive: come

    Ciao! se quello che vuoi creare è un layout responsivo, puoi risolvere cosi:

    HTML
    <div class="responsive">contenuto </div>
    <div class="responsive">contenuto </div>
    CSS
    .responsive{
    display:inline-block;
    }
    In questo modo disporrai i blocchi in modo orizzontale, sui dispositivi con display limitato si vedranno uno sotto l'altro
  • Re: Div affiancati responsive: come

    La risposta dell'utente precedente credo sia esauriente, ma in ogni caso ti consiglio di utilizzare la libreria Bootstrap, una libreria CSS.
    cerca bootstrap su google e leggi qualche guida!
Devi accedere o registrarti per scrivere nel forum
3 risposte