Wie kann ich Teile meiner Webseite in 3 Spalten mit css, frameset in html macht sich zu viele Seiten, um zu behandeln, wie kann ich es in css?

ich will meine Seite, 3 Spalten, mit der linken und rechten Spalte haben die gleiche Breite, und die mittlere Spalte auf die Inhalte und Formen etc. ich habe Kenntnis von html aber Scherz begann css.
die linken und rechten Spalte werden sollte 220px jeder, und die mittlere Spalte den rest der Breite. ich will es zu einem margin von 5px zwischen allen 3 Spalten und die Fenster. auch wie füge ich verschiedene Hintergründe auf die 3-Spalten - wie ich schon früher, aber die Hintergründe nicht kommen. auch alle 3 Spalten nehmen die gesamte Höhe des Fensters (unter Berücksichtigung der 5px margin)

Vielen Dank im Voraus!

Dies ist eine sehr häufige Anforderung, aber perfekte 3-Spalten-layouts sind leider Recht kompliziert mit CSS. Suche nach "css columns", "faux columns", und ähnliche, und Sie werden wahrscheinlich feststellen, viele Ansätze, jede mit Ihren vor-und Nachteilen.

InformationsquelleAutor gap | 2014-08-30

  1. 1

    Ich habe dir ein Turnschuh hier

    Und hier der code:
    1. HTML -

    <div id="left">text</div>
<div id="center">text</div>
<div id="right">text</div>

    2. CSS

    html, body {
    height: 100%;
    margin: 0;
}
div {
    height: 100%;
    background-color: red;
    float: left;
}
#left {
    width:220px;
    margin: 5px;
}
#center {
    margin: 5px 0;
    width: calc(100% - 460px);
}
#right {
    margin: 5px;
    width: 220px;
}

    Ich bin mit der calc () - Funktion für css. Ganz neu, so dass nicht alle Browser eigentlich unterstützen. Sie finden weitere details über die Unterstützung hier

    BTW: um den hintergrund Zu ändern, fügen Sie einfach

    background-color: #000;

    einem div-Element und ändern Sie die Farbe.

    InformationsquelleAutor Paco

  2. 0

    Ich bin nicht sicher, ob dies funktionieren würde, da bin ich nur halten diese unten an der Spitze von meinem Kopf, aber ich hoffe, es hilft.

    CSS

    .leftContent {
  float:left;
  width:220px;
  background-color: red;
  margin: 5px;
 }

 .rightContent {
   float:right;
   width:220px;
   background-color: green;
   margin: 5px;
  }

 .mainContent {
    padding: 15px; //optional
    background-color: blue;
  }

    HTML

    <div id="container">
  <div class="leftContent"></div>
  <div class="mainContent"></div>
  <div class="rightContent"></div>
</div>

    InformationsquelleAutor zsawaf

  3. 0

    Gut, das würde funktionieren, aber warum verwenden Sie Klassen für diese?, es ist etwas, das Sie würde nicht wollen, dass Ihre website wieder, also ID ' s wäre besser für diese.
    Auch nicht zu versauen die Breite der Seite, verwenden Sie besser % - Werte, so etwas wie dieses.

    Den HTML -

    <div id="container">
  <div id="leftContent"></div>
  <div id="mainContent"></div>
  <div id="rightContent"></div>
</div>

    und dann die CSS -

    #leftContent {
  float:left;
  width: 30%;
  background-color: red;
 }

 #rightContent {
   float: right;
   width: 30%;
   background-color: green;
  }

 #mainContent {
    width: 30%
    float: right
    background-color: blue;
    margin: 1%;
    padding: 1%; //Not Required
  }

    Natürlich die Prozentsätze für die Breite variieren, je nachdem, wie Ihr Körper/container Breite-setup.

    InformationsquelleAutor user6875529

Schreibe einen Kommentar