1 1 1 1 1 1 1 1 1 1 (0 Votes)

Esempio 61: pseudo classe :after per ripristinare il normale flusso html e posiziona il contenuto correttamente (clear).  Risultato

<!DOCTYPE html>

<html lang="it">

<head>

<meta charset="UTF-8">

<title>Titolo del documento</title>

<style>

.wrapper  {
    padding:20px;
    max-width:960px;
    margin:0 auto;
    }

.testo  {
    float:left;
    background:#6F9;
    width:29%;
    margin:1%;
    padding:1%;
    height:140px;    
    }

/* ripristina il normale flusso... after */
    
.pulisci:after  {
    content:"";
    display:block;    
    clear:both;
    }
    
.testo h2, .testo p {
    color:#039;
    text-align:center;
    margin:10px 0;
    }

/* il margine si vede grazie al div classe pulisci:after */

.contenuto  {
    padding:10px;
    background:#999;
    clear:both;
    margin-top:50px;
    }

</style>

</head>

<!-- esempio utile per vedere il funzionamento del float -->

<body>

<div class="wrapper">


<div class="pulisci">

<div class="testo">
<h2>Intestazione h2</h2>
<p>Testo in un paragrafo</p>
</div>

<div class="testo">
<h2>Intestazione h2</h2>
<p>Testo in un paragrafo</p>
</div>

<div class="testo">
<h2>Intestazione h2</h2>
<p>Testo in un paragrafo</p>
</div>

</div>


<div class="contenuto">
<p>C'è un colpo di scena per quanto riguarda l'ABOLIZIONE del Cambio tra Ora Solare e Ora Legale: è infatti arrivata da poco la DECISIONE dell'ITALIA, e sta già facendo discutere. L’Italia ha detto NO! Nel nostro Paese infatti resterà ancora in vigore il doppio orario: il governo italiano ha depositato a Bruxelles una richiesta formale per mantenere intatta la situazione attuale, senza variazioni. Il governo Conte bis non ha presentato modifiche al documento. Questo significa che tutto rimane inalterato.</p>
</div>

</div>

</body>

<!-- esempio realizzato o adattato per il corso gratuito Html/Css di https://www.guideinformaticagratis.it/ -->

</html>

Risultato  






Commenti (0)

There are no comments posted here yet

Lascia i tuoi commenti

  1. Posting comment as a guest.
Allegati (0 / 3)
Share Your Location