html - /css-segment-Bildschirm in 4 Quadranten

Möchte ich ein layout, in dem die Webseite gliedert sich wie im Bild unten gezeigt:

Ich habe versucht, eine Tabelle zu verwenden-tag, aber ich muss den ganzen Bildschirm verwendet werden(100% Breite und Höhe) und ich würde lieber mehr modern-tags, da werde ich haben, um am Ende mit canvas in einem dieser Segmente sowieso.

html - /css-segment-Bildschirm in 4 Quadranten

InformationsquelleAutor Mehran | 2011-11-11
  1. 9

    So? http://jsfiddle.net/NmjfE/

    HTML:

    <div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>

    CSS:

    .tl { position: absolute; top: 0; left: 0; right: 30%; bottom: 30%; 
      background: red; border:solid #000; border-width: 0 10px 10px 0; }
.tr { position: absolute; top: 0; left: 70%; right: 0; bottom: 30%; 
      background: blue; border:solid #000; border-width: 0 0 10px 0; }
.bl { position: absolute; top: 70%; left: 0; right: 30%; bottom: 0; 
      background: yellow; border:solid #000; border-width: 0 10px 0 0; }
.br { position: absolute; top: 70%; left: 70%; right: 0; bottom: 0; 
      background: green; }
    InformationsquelleAutor Alexey Ivanov
  2. 2

    Sie können css-raster für diese: https://codepen.io/heathrm/pen/BGJWvX

    HTML:

    <div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

    CSS:

    .grid {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 70% 30%;
  grid-auto-rows: 70vh 30vh;
}

.item {
  border: 1px solid black;
}
    InformationsquelleAutor hmoore
Schreibe einen Kommentar