960 grid

Synergy

Guten Tag,

Ich hab ein kleines Problem mit dem 960 Grid System.
Ich habe 3 grids: 1x grid_8 und 2x grid_4
Nun möchte ich das grid_8 und grid_4 in der selben Linie sind, und das andere grid_4 unter dem anderen grid_4.

Hier ein Bild was ich meine:

Spoiler anzeigen

Ich will das grid_8 nach oben schieben. Ich habe schon mit clearfix versuch aber hat nicht funktioniert.
Hier noch den Code:

Spoiler anzeigen

Code

<main class="container_12">
  <div class="grid_6">
    <div class="container">
      <div class="title">grid_6</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </div>
    </div>
  </div>
  <div class="grid_6">
    <div class="container">
      <div class="title">grid_6</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </div>
    </div>
  </div>
  <div class="grid_4">
    <div class="container">
      <div class="title">grid_4</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="grid_4">
    <div class="container">
      <div class="title">grid_4</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </div>
    </div>
  </div>
  <div class="grid_8">
    <div class="container">
      <div class="title">grid_8</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</main>

Alles anzeigen

Danke im voraus.

eXit.masteR

Es ist immer folgendes Prinzip:
<grid_3> <grid_3> <grid_6> = sind alle 3 nebeneinander

Lösung deines Problems:
Du musst dein grid_4 mit dem grid_6 tauschen. Fertig

**^MODSirSonay** · *- manatee, 03.12.2016*

Versuch mal das <div class="clear"></div> weg zu lassen. Danach müsste es eigentlich funktionieren.

Synergy

Zitat von Ailon

Es ist immer folgendes Prinzip:
<grid_3> <grid_3> <grid_6> = sind alle 3 nebeneinander

Lösung deines Problems:
Du musst dein grid_4 mit dem grid_6 tauschen. Fertig

Nein ich will dass grid_4 und grid_8 in der gleichen Reihe ist und das andere grid_4 unter dem oberen grid_4 ist. Aber ignorier diese 2 oberen grid_6

**^MODSirSonay** · *- manatee, 03.12.2016*

Zitat von Raaye

Versuch mal das <div class="clear"></div> weg zu lassen. Danach müsste es eigentlich funktionieren.

Zitat von Avea

Nein ich will dass grid_4 und grid_8 in der gleichen Reihe ist und das andere grid_4 unter dem oberen grid_4 ist. Aber ignorier diese 2 oberen grid_6

^^Mach es mal, danach wirst du sehen. Du musst das <div class="clear"></div> wo anders hintun.

Synergy

Hab schon an jede position versuch geht aber keines.

Synergy

Hab es hingekriegt. Hab nur das Problem das es verkehrt ist.
Die grid_4 sollten eigentlich links sein und das grid_8 rechts.
Screen:

Spoiler anzeigen

Hier der Code:

Spoiler anzeigen

Code

<main class="container_12">
  <div class="grid_8">
    <div class="container">
      <div class="title">grid_8</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
  <div class="grid_4">
    <div class="container">
      <div class="title">grid_4</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </div>
    </div>
  </div>
  <div class="grid_4">
    <div class="container">
      <div class="title">grid_4</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </div>
    </div>
  </div>
</main>

Alles anzeigen

Vielleicht kriegt es jemand hin das umzukehren

**^MODSirSonay** · *- manatee, 03.12.2016*

<main class="container_12">
<div class="grid_4">
<div class="container">
<div class="title">grid_4</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
</div>
</div>
<div class="grid_4">
<div class="container">
<div class="title">grid_4</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
</div>
</div>
<div class="grid_8"><div class="container"><div class="title">grid_8</div><div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div>
</main>

Synergy

Funktioniert nicht.

Spoiler anzeigen

**^MODSirSonay** · *- manatee, 03.12.2016*

Adde mich mal in Skype, ich mache es dir per Teamviewer.

Synergy

Hab die Lösung.

Spoiler anzeigen

Code

<main class="container_12">
  <div class="grid_4">
    <div class="container">
      <div class="title">grid_4</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </div>
    </div>
    <div class="container">
      <div class="title">grid_4</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </div>
    </div>
  </div>
  <div class="grid_8">
    <div class="container">
      <div class="title">grid_8</div>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</main>

Alles anzeigen

Kann geschlossen werden.

960 grid

Jetzt mitmachen!

Benutzer online in diesem Thema