Gibt es eine elegante Möglichkeit, 3 Elemente links, Mitte und rechts auf der gleichen Linie auszurichten?CSS self-line ausrichten
Im Moment verwende ich 3 <div> 's alle mit Breite: 33%; float: links; und es funktioniert nicht so gut.
Schweben Sie die ersten beiden nach links und schweben Sie die dritte nach rechts, während Sie sicherstellen, dass die Breiten der Linie entsprechen, auf der Sie sie platzieren.
Verwenden Sie Pixelbreiten, wenn Ihr Design dies zulässt.
, die für mich funktioniert:
<html>
<head>
<style>
div.fl {
float: left;
width: 33%;
}
div.fr {
float: right;
width: 33%;
}
</style>
</head>
<body>
<div class="fl">
A
</div>
<div class="fl">
B
</div>
<div class="fr">
C
</div>
</body>
</html>
meinst du das gleiche?
Float LeftBlock "links", CenterBlock "none" und RightBlock "rechts". Aber stellen Sie sicher, dass das Center-Element zuletzt auf Ihrer HTML-Seite erscheint, sonst wird es nicht funktionieren.
Sie können seltsame Ergebnisse erhalten, wenn in dem Element, zu dem Sie es hinzufügen, ein Rand vorhanden ist. Dies ist, wo width: 33% möglicherweise nicht funktioniert, weil Sie die Höhe des Randes dieses Element berücksichtigen müssen.
<html>
<head>
<title></title>
<style type="text/css">
div { float: left; width: 33%; margin: 4px; }
</style>
</head>
<body>
<div style="border: 1px solid #ff0000;">1</div>
<div style="border: 1px solid #00ff00;">2</div>
<div style="border: 1px solid #0000ff;">3</div>
</body>
</html>
Dies wird dazu führen, dass es nicht wie erwartet funktioniert, da der Rand zu jedem div hinzugefügt wird. Und falls Sie zu viel von einer Grenze jedes Add div Sie ein ähnliches Ergebnis erhalten border: 5px solid !important;
Sobald Sie den Rand von dem obigen Code wegzunehmen, sollte es wie erwartet funktionieren.
Versuchen Sie folgendes:
<div style="float: left; width: 100px;">
left
</div>
<div style="float: right; width: 100px;">
right
</div>
<div style="width: 100px; margin: 0 auto;">
center
</div>
Sie müssen berücksichtigen, dass die linken und rechten divs nicht schieben die Behälterbox (ein div um den Code oben) Höhe nach unten, auch wenn sie mehr Inhalt haben als das zentrale div, das einzige, das nicht schwebte. Ein Clearfix wird dafür sorgen.
Hier ist noch eine weitere varition des Themas: -
<html>
<head>
<style type="text/css">
div div {border:1px solid black}
div.Center {width:34%; float:left; text-align:center}
div.Left {float:left; width:33%; text-align:left}
div.Right {float:right; width:33%; text-align:right}
</style>
</head>
<body>
<div class="Left"><div>Left</div></div><div class="Center"><div>Center</div></div><div class="Right"><div>Right</div></div>
</body>
</html>
Beachten Sie, dass die Grenze durch die Verwendung eines inneren div für jede der ‚Platte‘ divs möglich ist. Außerdem gibt das Zentrum den verbleibenden 1% der Pixel.
Ich erstellte eine Seite mit allen drei Methoden zum Vergleich unter http://www.salestime.com/Ref/LeftCenterRight.html.
Das funktioniert für mich. Ich weiß nicht, ob es das eleganteste ist, aber es macht die Arbeit: Es reagiert gut auf den Inhalt und die Größe der Zelle.
<html>
<head>
<style>
.a {
border: 1px dotted grey;
padding: 2px;
margin: 2px;
}
.l {
border: 1px solid red;
background-color: #fee;
float:left;
}
.c {
border: 1px solid green;
background-color: #efe;
text-align:center;
}
.r {
border: 1px solid blue;
background-color: #eef;
float:right;
}
</style>
</head>
<body>
<div class="a">
<div class="l">
</div>
<div class="r">
toto v.2 adfsdfasdfa sdfa dfas asdf
</div>
<div class="c">
item 1 | tiem 2 | asdf 3 | asdfad asd | aasdfadfadfads
</div>
</div>
</body>
</html>
können Sie einen vollständigen Codebeispiel anhängen? – bendewey
Codebeispiel würde helfen. –