¿Hay alguna manera elegante de alinear 3 elementos a la izquierda, al centro y a la derecha en la misma línea?CSS alineación de la misma línea
Ahora estoy usando 3 <div> con ancho: 33%; flotador: izquierda; y no está funcionando muy bien.
Flote los primeros dos a la izquierda y flote el tercero a la derecha, mientras se asegura que los anchos se ajusten a la línea donde los está colocando.
Utilice anchuras de píxeles si su diseño lo permite.
que funciona para mí:
<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>
Qué quiere decir lo mismo?
Flotante LeftBlock 'izquierda', CenterBlock 'none' y RightBlock 'right'. Pero asegúrate de que el elemento Center aparezca por última vez en tu página HTML, de lo contrario no funcionará.
Puede obtener resultados extraños si hay algún margen en el elemento al que lo está agregando. Aquí es donde width: 33% puede no funcionar porque deberá tener en cuenta la cantidad de margen que tiene ese 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>
Esto hará que no funcione como se esperaba debido al margen agregado a cada div. De manera similar, si agrega demasiados bordes a cada división, obtendrá un resultado similar border: 5px solid !important;
Tan pronto como elimine el margen del código anterior, debería funcionar como se esperaba.
Prueba esto:
<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>
Es necesario tomar en cuenta que la izquierda y la derecha divs no empujan la caja contenedora (un div alrededor del código anterior) de altura hacia abajo, incluso si tienen más contenido que el centro div, el único que no flotó. Un clearfix se encargará de esto.
Aquí es otra 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>
Tenga en cuenta que la frontera es posible mediante el uso de un div interior para cada uno de los divs 'Panel'. También le da al centro el restante 1% de píxeles.
Creé una página con los tres métodos de comparación en http://www.salestime.com/Ref/LeftCenterRight.html.
Esto funciona para mí. No sé si es el más elegante, pero sí hace el trabajo: reacciona bien al contenido "celular" y al cambio de tamaño.
<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>
¿Puedes adjuntar una muestra de código completo? – bendewey
muestra de código ayudaría. –