Einzelnen Beitrag anzeigen
  #6 (permalink)  
Alt 20.10.2013, 13:42
Benutzerbild von Manfred62
Manfred62 Manfred62 ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hier ein Beispiel mit media-queries. Ich hatte so etwas ähnliches mal mit PocketGrid gemacht (daher stammt block und block-group).
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        test
    </title>
    <style type="text/css">
    * {margin: 0; padding: 0;}
    body {font: 100%/1.6 sans-serif; padding: 2em 0; color: #000;}

    /* Border-box-sizing */
    .block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }

  /* Clearfix */
  .block-group {
      *zoom: 1;
  }
  .block-group:before, .block-group:after {
      display: table;
      content: "";
      line-height: 0;
  }
  .block-group:after {
      clear: both;
  }
  .block-group {
      /* ul/li compatibility */
      list-style-type: none;
      padding: 0;
      margin: 0;
  }

  /* Nested grid */
  .block-group > .block-group {
      clear: none;
      float: left;
      margin: 0 !important;
  }

  /* Default block */
  .block {
      float: left;
      width: 100%;
  }
  .container {
    max-width: 60em;
    margin: 0 auto;
    background: #FFFF80;
}

.b1, .b2, .b3 {
    margin-left: 1.5%;
    margin-top: 1em;
    padding: 1em;
    background: #ccc;
    width: 31.333333333333332%;
}

.b4 {
    margin: 1em;
    margin-left: 55%;
    padding: 1em;
    background: #0FF;
    width: 10em;
    text-align: center;
}

/* =Tablet (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 48em) and (max-width: 59.9375em) {
    .container {width: 45.5em;}
    .b1 {width: 40%;}
    .b2, .b3 {width: 48%;}
    .b2 {clear: left;}
    .b4 {margin-left: 40%;}
}

/* =Mobile (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 47.9375em) {
    body {padding: 0;}
    .container { width: 19.375em;}
    .b1, .b2, .b3 {width: 97%;}
    .b4 {margin-left: 33%;}
}

/* =Mobile (Portrait 320px)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 29.9375em) {
    .b4 {margin-left: 25%;}
}

/* =Mobile (Landscape)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 30em) and (max-width: 47.9375em) {
    .container { width: 29.375em; }
}
</style>
</head>
<body>
    <div class="container block-group">
            <div class="b1 block">
                <b>Block 1</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, earum, porro, nesciunt, culpa numquam magni unde officia dolores quo quibusdam ipsam ipsum animi reprehenderit totam rem sint placeat optio aperiam!
            </div>
            <div class="b2 block">
                <b>Block 2</b> Deleniti, repellendus, quidem, quo, libero distinctio praesentium nesciunt odit asperiores esse ipsa voluptas consequatur voluptatem nemo aspernatur tenetur quasi debitis qui provident quibusdam dolore culpa sunt inventore nobis cumque molestias.
            </div>
            <div class="b3 block">
                <b>Block 3</b> Molestiae, reprehenderit, architecto, odit, consequuntur voluptas earum nulla magni nostrum voluptatibus magnam alias iusto dolores similique deserunt maiores ullam eius dolor. Hic, ducimus, in ipsum asperiores quia mollitia accusamus vero.
            </div>
        <div class="b4 block">
            <b>Block 4</b>
        </div>
    </div>
</body>
</html>

Geändert von Manfred62 (20.10.2013 um 19:13 Uhr) Grund: Link ergänzt
Mit Zitat antworten