Alinear botones de difenrentes divs

j4v13r · #1 (**permalink**) 16/03/2009, 08:57

Buenos dias estoy teniendo un problema que no se me ocurre como arreglar

tengo 4 divs los cuales contienen una etiqueta p con un texto y un boton,

los divs tiene ancho fijo, y alto variable por que no conozco la longitud de los textos.

los divs estan flotados a la izquierda por lo que se ponen uno al lado del otro.

y lo que quiero hacer y no puedo es que los botones queden en la misma linea.

se enteinde??

la unica cosa con lo que pude lograr un efecto similar es fijando el alto y poniendole posicion al boton pero no me sirve por que no conzco el tamlo del texto y si todos los textos son muy cortos queda mal y si son muy largos tambien.

alguien sabe como se puede hacer para que se alinien dinamicamente segun el tamaño del texto???

gracias!!!

pego el codigo para que lo puedan ver:

Código HTML:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style>
	.box {
	border:#000000 1px solid;
	width: 200px;
	height: 450px;
	float: left;
	margin:2px;
	}
	
	.box-fix {
	border:#000000 1px solid;
	width: 200px;
	height: 450px;
	float: left;
	margin:2px;
	}
	.box-fix input {
	position:absolute;
	top:900px;
	}
</style>
</head>
<body>
<p>	
asi es como queda
</p>
<div class="box">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
  <input name="button" type="button" value="Boton"/>
</div>
<div class="box">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
		<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
			<input type="button" value="Boton"/>
</div>
<div class="box">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
		<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
			<input type="button" value="Boton"/>
</div>
<div class="box">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
		<input type="button" value="Boton"/>
</div>

<p>
y asi es como quiero que quede pero necesito que quede asi sin el psoition: absolute ni el height fijo en el css
</p>

<div class="box-fix">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
  <input name="button" type="button" value="Boton"/>
</div>
<div class="box-fix">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
		<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
			<input type="button" value="Boton"/>
</div>
<div class="box-fix">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
		<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
			<input type="button" value="Boton"/>
</div>
<div class="box-fix">
	<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p> <p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum </p>
		<input type="button" value="Boton"/>
</div>
</body>
</html>

Calizman · #2 (**permalink**) 16/03/2009, 10:54

Saludos!!

No se si lo que quieres realmente es lo que valla a servir, puesto que si no sabes cuanto texto vas a tener, y todos los botones se van a ver a la misma altura, entonces tendras un problema si el texto se alarga demasiado, porque el texto se pondra sobre el boton y no se dejara ver.

Te recomiendo que pruebes esto:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-gt">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.box {
border: 1px solid #000000;
margin: 2px;
width: 200px;
height: 450px;
float: left;
}
.box-fix {
border: 1px solid #000000;
margin: 2px;
width: 200px;
height: 450px;
float: left;
}
.box-fix input {
position: absolute;
top: 900px;
}
#pie {
text-align: center;
color: #ffffff;
display: inline;
height: 3em;
}
.ejemplo {
font-size: 0.8em;
font-weight: bold;
position: relative;
top: 2em;
}

</style>
</head>
<body>
<p> asi es como queda
</p>
<div class="box">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<div id="pie">
<span class="ejemplo"><input name="button"
value="Boton" type="button" /></span></div>
</div>
<div class="box">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<div id="pie">
<span class="ejemplo"><input name="button"
value="Boton" type="button" /></span></div>
</div>
<div class="box">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<div id="pie">
<span class="ejemplo"><input name="button"
value="Boton" type="button" /></span></div>
</div>
<div class="box">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren  </p>
<div id="pie">
<span class="ejemplo"><input name="button"
value="Boton" type="button" /></span></div>
</div>
<p>
y asi es como quiero que quede pero necesito que quede asi sin el
psoition: absolute ni el height fijo en el css
</p>
<div class="box-fix">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<input name="button" value="Boton" type="button" />
</div>
<div class="box-fix">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<input value="Boton" type="button" />
</div>
<div class="box-fix">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<input value="Boton" type="button" />
</div>
<div class="box-fix">
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<p>loren ipsum loren ipsum loren ipsum loren ipsum loren ipsum
loren ipsum loren ipsum loren ipsum </p>
<input value="Boton" type="button" />
</div>
</body>
</html>

Modifique un poco tu codigo, e hice que el boton siempre estuviera en la parte de abajo de el texto, creo que es lo que mejor va.

Me dices que te parece no?

j4v13r · #3 (**permalink**) 16/03/2009, 11:06

Gracias por la sugerencia pero no es lo que necesito. por ahi me exprese mal. lo que necesito es que los botones queden en la misma linea sin importar el largo que tenga el texto. o sea quiero un bloque llamemosle cuadro, en el cual se muestra un p con texto y cuando ese p termine se muestr un boton. de estos cuadros va a haber varios digamos 4 flotados a la izquierda que se van a acomar uno al lado del otro. hasta aqui no hay complegidad el codigo en css para hacer eso es muy simple solo se pone el ancho del cuadro y el float:left; y ya esta. ahora el problema es el siguiente. necesito que los botones se alinien. que que queden todos a la misma altura, la unica forma que encontre de hacer eso es poniendo le un alto fijo al cuadro (div) y usando position:relative, se le especifica al input las coordenadas donde debe mostrarse y listo, estan todos en la misma linea, ahora bien si el texto es muy corto queda mucho espacio en blanco, y si el texto es muy largo el boton se pone por encima del texto queda mal de las dos formas, quiero saber si hay alguna dorma de hacer esto con css. sin fijar la altura del cuadro que contiene al p y al input.

Gracias!!

talmente · #4 (**permalink**) 17/03/2009, 12:31

Hola j4v13r, no termino de entenderte pero mira esto y haber si damos con lo que quieres.

Código:

ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: inline;
}
li {
	margin: 0px;
	padding: 0px;
	display: inline;
}
p {
	margin: 0px;
	padding: 0px;
	display: inline;
}

HTML:

<ul>
<li><p>texto</p><input type="button" value="fgfdgfdg" />
</li>
<li><p>texto</p><input type="button" value="jhgjhgjhjhgfj" />
</li>
<li>
  <p>textfgfdgfdggo</p>
  <input type="button" value="hjhgjhgjhgjhgjhgjhgjhgjhgj" />
</li>
</ul>

j4v13r · #5 (**permalink**) 17/03/2009, 13:21

Cita:

Iniciado por talmente

Hola j4v13r, no termino de entenderte pero mira esto y haber si damos con lo que quieres.

Código:

ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: inline;
}
li {
	margin: 0px;
	padding: 0px;
	display: inline;
}
p {
	margin: 0px;
	padding: 0px;
	display: inline;
}

HTML:

<ul>
<li><p>texto</p><input type="button" value="fgfdgfdg" />
</li>
<li><p>texto</p><input type="button" value="jhgjhgjhjhgfj" />
</li>
<li>
  <p>textfgfdgfdggo</p>
  <input type="button" value="hjhgjhgjhgjhgjhgjhgjhgjhgj" />
</li>
</ul>

Gracias por responder pero no es lo que busco. si pegas el cod que poste en un html y lo ves en el browser me vas a entender es simple quiero una caja con un texto y un boton que se puedan flotar y los botones queden alineados sin importar la cantidad de texto que alla. sin usar tablas ni fijando un largo para la etiqueta p que contiene el texto