C'è un modo elegante per allineare 3 elementi a sinistra, al centro e a destra sulla stessa linea?Allineamento riga CSS
In questo momento sto usando 3 <div> con larghezza: 33%; float: sinistra; e non sta funzionando troppo bene
Galleggi i primi due a sinistra e fai galleggiare il terzo a destra, assicurandoti che la larghezza si adatti alla linea su cui li stai posizionando.
Usa le larghezze dei pixel se il tuo design lo consente.
che funziona per me:
<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>
vuoi dire la stessa cosa?
Float LeftBlock 'left', CenterBlock 'none' e RightBlock 'right'. Ma assicurati che l'elemento Center venga visualizzato per ultimo nella pagina HTML, altrimenti non funzionerà.
È possibile ottenere risultati strani se c'è qualche margine nell'elemento a cui si sta aggiungendo. È qui che width: 33% potrebbe non funzionare perché è necessario calcolare la quantità di margine di quell'elemento.
<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>
Ciò causerà il mancato funzionamento come previsto a causa del margine aggiunto a ciascun div. Allo stesso modo, se aggiungi troppo di un bordo per ogni div otterrai un risultato simile border: 5px solid !important;
Non appena togli il margine dal codice precedente, dovrebbe funzionare come previsto.
Prova questo:
<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>
è necessario prendere in considerazione che le div destra e sinistra non spingere la casella contenitore (un div intorno al codice di cui sopra) altezza verso il basso, anche se hanno più contenuti rispetto il centro div, l'unico non fluttuante. Un clearfix si prenderà cura di questo.
Qui è un altro varition del tema: -
<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>
Nota che il confine è possibile utilizzando un div interno per ciascuno dei div 'Pannello'. Dà anche al centro il restante 1% di pixel.
Ho creato una pagina con tutti e tre i metodi per il confronto su http://www.salestime.com/Ref/LeftCenterRight.html.
Questo funziona per me. Non so se è il più elegante, ma fa il lavoro: reagisce bene ai contenuti e al ridimensionamento della "cella".
<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>
è possibile allegare un esempio di codice completo? Esempio di codice – bendewey
potrebbe aiutare. –