Wie baut man eine Webseite mit einem Haupttextkörper und 2 Spalten darunter?

Ich habe einen Textkörper, den ich versuche, optisch ansprechend zu gestalten, aber ich kann es nicht herausfinden. Das Ziel ist dieses Layout (siehe Pseudocode):

<container>
    <main />
    <column1 /><column2 />
</container

Grundsätzlich gibt es einen großen Textkörper und darunter zwei kleinere Textkörper, die Spalten sind. Die Spalten wären Seite an Seite unter dem Haupttext und ihre kombinierte Breite + ihre Auffüllung wäre die gleiche Breite wie der Haupttext + seine Auffüllung.

Derzeit versuche ich eine Javascript + CSS-Methode, die den Text automatisch in Spalten aufteilt, aber es geht nirgendwo hin und ich kann keinen visuell ansprechenden Weg finden, dies zu tun.

Antworten (1)

Sie brauchen dafür kein Javascript, nur html und css.

Sie können so etwas tun: ( siehe Code live hier )

Eine grundlegende HTML-Struktur:

<div id="container">
    <div id="main">
        Main
    </div>
    <div class="column">
        Column1
    </div>
    <div class="column">
        Column2
    </div>
</div>

CSS für die Elemente (nur als Beispiel):

#container {
    display:block;
    width:100%;
    float:left;
    clear:both;
}
#main {
    display:block;
    clear:both;
    border:#000 solid 1px;
}
.column {
    display:block;
    width:49%;
    float:left;
    border:#000 solid 1px;
}

Dies wird zu diesem Ergebnis führen:

Beispiel HTML

Das #Containerist die "Seite". In diesem Beispiel füllt es 100 % des Browserfensters aus. Sie können es auf eine feste Größe einstellen, wenn Sie möchten (z. B. Width:960px;und margin:0 auto 0 auto;um es zu zentrieren, in der CSS-Datei).

Der Link oben führt zu einer Live-Ansicht des Codes. Fühlen Sie sich frei, mit dem Code dort herumzuspielen. Klicken Sie auf Ausführen, um Ihre Änderungen zu aktualisieren.

Ich habe border:das CSS hinzugefügt, um die Felder für das Beispiel sichtbar zu machen (sie fügen Breite hinzu, sodass die Breite im Beispiel 49 % der Spalten beträgt).

Padding erhöht die Breite auch dann, wenn Sie für die Spalte 50 % einstellen (= 50 % + Padding). Der Trick besteht darin, ein weiteres div innerhalb des Spalten-div mit nur der benötigten Auffüllung (keine Breite) hinzuzufügen, und es passt sich selbst an den verfügbaren Platz an.

Hoffe das hilft!

Das sieht wirklich toll aus und ist genau das, was ich versucht habe. Ich glaube, ich habe zu viel nachgedacht und es komplizierter gemacht, als es sein musste. Ich habe versucht, ein Leerzeichen <div> hinzuzufügen, aber es wird vom Browser einfach ignoriert. Hier ist die Geige: jsfiddle.net/4vkca
Der Link ging zu meinem ursprünglichen Code. Klicken Sie in Ihrer Geige einfach auf Speichern und es wird ein neuer Link mit Ihren Änderungen erstellt.
Ah, Entschuldigung - jsfiddle.net/9k3bV
Ok, versuchen Sie diesen Code: jsfiddle.net/9k3bV/4 (überarbeitet)
Perfekt! Vielen Dank! Das ist viel einfacher, als ich es versucht habe.
Kein Problem. Schön, dass es geholfen hat. Ich habe auch eine Überarbeitung mit fester Polsterung vorgenommen, die auch mehr nutzbaren Platz lässt. Spielen Sie einfach damit herum, um die besten Werte für Sie zu finden: jsfiddle.net/9k3bV/5
Beachten Sie, dass Sie in modernen Browsern, einschließlich IE8, die CSS-Eigenschaft box-sizingauf den Wert setzen können "border-box", um den Rand und die Auffüllung in die Breite von 50 % einzubeziehen.
Wie baut man eine Webseite mit einem Haupttextkörper und 2 Spalten darunter?
AntwortenHierDatenschutz-Bestimmungen1y, 0v