Wie erstellen Sie eine zwei-Spalten-layout ohne html-Tabellen?

Habe ich gesagt, mehrmals, dass ich sollte nicht mit Tabellen für das layout-design, aber ich ständig mich selbst zu finden gehen wir zurück zu Ihnen, wenn ich kann nicht herausfinden, wie, etwas zu tun.

Brauche ich zum erstellen von einem layout mit zwei Spalten. Die linke Spalte ist 300px Breite und die Rechte Spalte nimmt den rest der Breite auf der Seite. Ich kann nicht herausfinden, wie man richtig tun Sie dies mit einfachem HTML und ich kann auch nicht ganz herausfinden, wie es zu tun mit einer Tabelle entweder.

Haben, um die Rechte Spalte zu nehmen den rest von der Breite scheint es, dass ich brauchen würde, um festlegen der linken Spalte die Breite, die mit einem Prozentsatz, so dass die Rechte Spalte die Breite kann 100% weniger der Anteil der linken Spalte. Aber ich brauche die linke Spalte 300px genau.

Das einzige, was ich denken kann, zu tun ist, berechnen die richtige Spaltenbreite zur Laufzeit mit JS. Irgendwelche Ideen, wie kann ich dies erreichen, ohne Tabellen und/oder ohne Javascript?

Mein go-to in der Vergangenheit: matthewjamestaylor.com/blog/...
Sollten Sie nicht mit Tabellen für das layout design
vielen Dank für diese wertvolle information... darauf zu erklären, anstatt zu wiederholen, was ich haben offensichtlich bereits erzählt?
Haben Sie versucht, die CSS float?
Ich habe eine Antwort. Nichts für ungut, wollte nur bekräftigen, was Sie bereits kennen, richtig zu sein. 😉
Ich weiß es zu schätzen, aber bis jemand erklärt meine warum darf ich nicht mit Hilfe von Tabellen-einige konkrete Gründe, dann glaube ich nicht, schon wissen, dass es korrekt zu sein. Ich weiß nur, dass das, was die Leute mir erzählen.
Es ist viel einfacher zu erstellen fluid-layouts mit Tabellen. Die zwei Probleme bei der Verwendung von Tabellen ist die Tatsache, dass es nicht die semantische (Tabellen, die Daten enthalten sollten), und es fügt aufblasen, um den HTML-Code. Aber mit CSS 3 können Sie reguläre divs und machen Sie Verhalten sich wie Zellen einer Tabelle onenaught.com/posts/201/use-css-displaytable-for-layout Wenn Sie können nicht Sie verlassen sich auf CSS-3, die Sie gehen zu müssen, zu kämpfen Ihren Weg durch die Schwimmer und Margen und weniger aufblasen, dann die Tabellen, sondern es werden semantische HTML -, oder Sie können nur giveupandusetables.com
Prozentsätze sind wirklich die beste Lösung, auch wenn es zunächst schwieriger, mit Ihnen zu arbeiten...sollten Sie sich über Prozentwerte und em ' s mehr, denn das ist die Zukunft, und Sie arbeiten beide als standard bereits.
Ich habe Prozentsätze viel und es ist in der Regel in Ordnung, aber in meinem speziellen Fall, ich bin beauftragt, dass die linke Spalte 300 Pixel. Nicht mehr, nicht weniger.

InformationsquelleAutor Chev | 2013-01-31

1

Bis wir flexbox-layout würde ich absolute Positionierung:

Html:
```
<div id="container">
    <div id="left">left one</div>
    <div id="right">right one</div>
</div>
```
CSS:
```
#container {
    position: relative;
    height: 150px;
}

#left, #right {
    position: absolute;
    top: 0px; 
    bottom: 0px;
}

#left {
    left: 0px; 
    width: 300px;
    background: red;
}

#right {
    left: 300px; 
    right: 0px;    
    background: green;
}
```
jsfiddle

Gibt es alternativen, wenn Sie möchten, dass das layout an den Inhalt, anstatt die container. Wenn Ihr die Rechte Spalte hat mehr Inhalte, die Sie nutzen könnten:
```
#container {
    position: relative;
}

#left {
    position: absolute;
    left: 0px; 
    width: 300px;
    top: 0px; bottom: 0px;
    background: red;
}

#right {
    margin-left : 300px; 
    background: green;
}
```
jsfiddle

Wenn Ihr die linke Spalte hat mehr Inhalt, Verwendung:
```
#container {
    position: relative;
}

#left {
    width: 300px;
    background: red;
}

#right {
    position: absolute;
    left: 300px; 
    right: 0px;
    top: 0px; bottom: 0px;
    background: green;
}
```
jsfiddle
- Dies bedeutet erfüllen meine Bedürfnisse. Kann jemand erklären, warum es 2 downvotes?
- ich Frage mich, die gleiche Sache, das war nun meine Antwort, aber es funktioniert...
- Ich nehme es zurück. codepen.io/Chevex/pen/hCrot. Gleiche problem wie die Schwimmer. Einmal absolut positioniert in der rechten Spalte nicht mehr den verbleibenden Platz einnimmt, ist es nur so breit wie sein Inhalt.
- hinzufügen right: 0px auf der rechten Spalte. Alle Eigenschaften, die ich fügte hinzu, in meinem Beispiel sind es für einen Grund. codepen.io/anon/pen/jAeux
- Da die absolute Positionierung sollte nur verwendet werden, wenn unbedingt nötig (kein Wortspiel beabsichtigt). Es kommt mit potentiellen Probleme bei der Wartung und Nebenwirkungen.
- Gotcha. Danke.
- So funktioniert die Verlegung dieser mit Schwimmern. Dies ist nur eine unnatürliche layout für die aktuelle CSS, die ist so konzipiert, layout-Dokumente, nicht apps. Jeder app-layout ist ein hack, und kommt mit Kompromissen. Der einzige Weg, dies zu tun Recht ist mit flexbox. Aber es ist nicht allgemein unterstützt noch.
- Ich mag dieses besser als Schwimmer. Jedes mal, wenn ich schwebt es fühlt sich wackelig.
- Die Absolute Positionierung ist ein guter Weg, um schnell ruinieren Seite fließen und automatische Größenanpassung. Verwenden Sie für die Spalten ist eine schlechte Wahl. Verwenden flexbox oder schwimmende, nicht aber die absolute Positionierung. Viel Glück versuchen, um einen sticky footer ohne JavaScript.
- Was ist so schwer daran? Es ist gut, wenn Sie verstehen, seine Auswirkungen, das ist hier ein sehr einfaches Beispiel ist der gleiche code, plus eine Kopf-und eine Fußzeile jsfiddle.net/V4etF/8 Sie müssen nur verstehen, dass etwas absolut nicht in den Textfluss des Dokuments. Sicher, es kann schwierig werden, wenn Sie versuchen, Sie zu viel zu tun, ja es macht es leichter, gewisse Dinge zu tun, aber es ist auch viel einfacher, andere Dinge zu tun mit einer absoluten Positionierung. Diese Antwort verdient mehr upvotes, es ist einfach und funktioniert!
- ist das nicht ein sticky footer, das ist eine Feste Fußzeile.
- Lernen eine Menge von Ihnen heute, ich war nicht bewusst, was der Begriff sticky footer bedeutet.
- ist das ein sticky footer? jsfiddle.net/d6smN
- ja, aber es scheint einige Probleme haben
- ich wollte nur testen
InformationsquelleAutor Jan
2

Spalten sind ziemlich straight-forward mit Schwimmern. Die Schwierigkeit liegt darin, dass die Eltern container deaktivieren Sie das schwebte Kinder.

_HTML:
```
<div class="container">
  <div class="column column-a">
    ...
  </div>
  <div class="column column-b">
    ...
  </div>
</div>
```
_CSS:
```
.container {
  background-color: red;
  color: white;
  width: 520px;
  zoom: 1;
}
.container:before,
.container:after {
  content: '';
  display: table;
}
.container:after {
  clear: both;
}
.column-a {
  background-color: blue;
  float: left;
  width: 300px;
}
.column-b {
  background-color: green;
  float: right;
  width: 200px;
}
```
Sollten Sie beachten, dass die kürzere der beiden Spalten nicht verlängern wird, um den Boden des Behälters. In der Regel den hintergrund der beiden Spalten wird vertikal wiederholt auf das element enthalten.

Wenn Sie brauchen, um pad die Spalten, die ich in der Regel hinzufügen div.inner Elemente innerhalb jeder .column element, aber wenn Sie wollen, um zu vermeiden, "divitis", können Sie einfach hinzufügen:
```
.column {
    box-sizing: border-box;
    padding: 20px;
}
```
Fluid-Breite Spalten, alles, was Sie tun müssen ist, stellen Sie sicher, Ihre Breite zu 100% summieren:
```
.column-a {
    width: 80%;
}
.column-b {
    width: 20%;
}
```
- Super Antwort, obwohl "einfach" ist nicht das Wort der Wahl, würde ich genau verwenden 😛
- Sie können auch overflow: auto; auf die container zu groß, um es schwebte Kinder. Es ist ein bisschen weniger hacky. codepen.io/anon/pen/aizrB. Gute Lösung!
- der komplizierte Teil ist die clearfix, und wenn du das mit einem CSS-Präprozessor (ich bin WENIGER im verlinkten Beispiel) Sie können Abstrakt und es in ein einfaches mixin. Der Vorteil gegenüber der Positionierung ist, dass die nachfolgenden Inhalte platziert werden können, nachdem der Behälter in einer angemessenen Art und Weise. Irgendwann in der Zukunft, flexbox wird hoffentlich fertig gestellt werden, und unterstützt, und alle diese lächerliche Antworten werden obsolet gemacht.
- Das funktioniert nicht, in dem Beispiel der OP geschrieben, das ist die richtige Spalte zu nehmen den übrigen Raum.
- ok, also nicht schweben Sie in der rechten Spalte, und stattdessen gibt es einige statische Links-Polsterung, jetzt glücklich?
- Ja, jetzt glücklich! Sie bekommen mein upvote, sollten Sie nicht hinzufügen, dass die Antwort da, dass war das, was der OP gefragt wurde?
InformationsquelleAutor zzzzBov
1

<div> Elemente grundlegend füllen Ihre container Breite, oder was von ihm übrig bleibt. Also, wenn Sie eine 300px Breite div, dann div daneben mit keine Breite angegeben, der 2. div zu füllen den rest des Behälters.
- Ich habe versucht. Nachdem die beiden divs sind schwimmende Links Sie nicht mehr dauern, bis die Breite der container, sondern Sie sind breit genug, um passen Ihre Inhalte nur.
- codepen.io/Chevex/pen/AksFh
- Gut zu include in deiner Frage, was Sie versucht haben
- Manchmal, wenn ich tun, dass Sie Einfluss auf potenzielle Beantworter zu konzentrieren, auf die kleinen code-snippet, das eher als geben Sie mir Ihre Lieblings-Lösungen zu lösen das zentrale problem. Das ist, warum habe ich es nicht. Ich entschuldige mich.
- Das kann ich verstehen, aber Sie will nicht Abfall Menschen Zeit, mit Ihnen zu geben hast du schon versucht, w/o wissen, dass Ihr es ausprobiert habt. Wird nicht gewinnen, müssen Sie alle bis-Stimmen sowieso. Sowieso, keine Sorge!
- Ich denke, ich dachte nur, dass mein Versuch schwimmt war eine ziemlich noobish Versuch, und es war nutzlos für andere, die ich angenommen hätte besser wissen. lol, ich denke, es ist gut zu wissen, ich bin nicht zu weit Weg von dem, was andere versuchen würde.
InformationsquelleAutor Madbreaks
0

Satz der linken Spalte 300px, setzen Sie in der rechten Spalte auf 100%... fertig. Um zu vermeiden, any cross-browser Seltsamkeit, Folgen Matt Ball der link zu... http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm . Er ist mit einem mysteriösen 2. wrapper, würde ich erachten unnötig, aber kleine Schritte 🙂

Sobald Sie in die Hülle, um die Spalte heights = Sie müssen min-height auf 100% glaube ich. Sie können die css-Eigenschaft overflow Probleme mit der text überläuft. Ziemlich straight-forward Zeug, ich erinnere mich, dass Sie eine Hölle von einer Zeit zu finden, wie zu tun, gleich Spalten, die Hülle ist der Schlüssel. Verwenden Sie außerdem keine JS für diese Leute, die JS sind entweder etwas mehr erweitert oder sind komplett neu in html/css.
- NÖ. Einstellung der rechten Spalte zu 100% lässt es bis 100% des Containers (der Seite), damit es die Breite wird die Breite der Seite, was bedeutet, dass es blutet, um die Rechte von 300px. Oder im Falle der floating elements, lässt er sich unter der ersten. codepen.io/Chevex/pen/JDLBc
InformationsquelleAutor RandomUs1r

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.