<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Some Example from CSS-Tricks</title>
<style type="text/css">
* { margin: 0; padding: 0; }
p { padding: 10px; }
#left { position: absolute; left: 0; top: 0; width: 50%; }
#right { position: absolute; right: 0; top: 0; width: 50%; }
</style>
</head>
<body>
<div id="left">
<p>Left Half</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="right">
<p>Right Half</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</body>
</html>Linkes & rechtes Hälften-Layout
Chris Coyier am
Besser sind Floats, aber ich denke, diese Technik hat den gleichen Effekt. Gut für die Verwendung mit einem relativ positionierten Wrapper.
Tatsächlich, wenn Sie 2 Spalten innerhalb eines übergeordneten Divs benötigen, stellen Sie sicher, dass das übergeordnete Div auf „position:relative;“ gesetzt ist, um absolut positionierte Kindelemente ordnungsgemäß einzuschließen.
Beispiel
Floats sind in diesem Fall besser. Ich versuche generell, position: absolute; zu vermeiden, besonders bei kritischen Layoutkomponenten.
Float hat auch seine Probleme und erfordert zusätzliche CSS für das Float-Clearing.
@Jeff
Ich würde zusätzliche Regeln zum Clearen eines Floats in CSS bevorzugen, anstatt absolute Positionierung zu verwenden – manchmal kann das etwas unübersichtlich werden.
Besser sind Floats für die Layout-Aufteilung. Außerdem ermutige ich anstelle der Verwendung von * zum Zurücksetzen von HTML-Element-Stilen, zur Verwendung eines Resets für einzelne Elemente in einer Gruppe.
Warum sich die ganze Mühe machen, wenn man einfach Tabellen verwenden kann, kein Hacking hier und da.
Stecken Sie noch in 1995 fest? ;)
Ich stimme zu, nur weil neue Wege auftauchen, heißt das nicht, dass man sie benutzen muss.
d.h. bgColor=grau, obwohl abhängig davon niemals verschwinden wird, da grundlegende Browser sie immer benötigen werden.
Es ist eine neue Lösung, obwohl sie leicht über Tabellen realisiert werden kann.
Dennoch ist es eine neue Art, Dinge zu tun. Man weiß nie, wo man sie nützlich findet und wie...
Lasst uns Flexbox in den Ring werfen. Es würde dies problemlos bewältigen, kein Clearing, keine Absoluten.
Warum nicht „display: inline-block“ verwenden und dann die Breite auf 50 % setzen? Das ist praktischer.
Wenn zwischen den beiden Elementen ein Leerzeichen vorhanden ist, werden sie umbrochen, was eine ziemlich fragile Sache ist.
Heutzutage würde ich wahrscheinlich...
Stimme Chris oben zu, siehe https://codepen.io/anon/pen/addNyK