css - posicionar - Dos DIV lado a lado y alineados verticalmente en su parte inferior.
ordenar div css (6)
Necesito que dos DIV se coloquen lado a lado y se alineen verticalmente en su parte inferior.
- El div naranja no tiene una anchura o altura . Puede crecer dependiendo de su contenido.
- Debería poder usar el relleno y el margen del div verde
- Me gustaría tener una solución que no use javascript
Esta fue una práctica divertida :) Probablemente no sea la mejor respuesta, pero debería hacer el trabajo.
html:
<table>
<tr>
<td>
<div id="div3">testing a whole<br/> bunch <Br/>of text and content t<br/>hat this co<br/>uld co<br/>ntain<br/> hadahdee<br/> wha da da deet</div>
</td>
<td>
<div id="div4">nick</div>
</td>
</tr>
</table>
css:
td
{
vertical-align:bottom;
}
#div3
{
border:solid 5px blue;
float:left;
}
#div4
{
width:50px;
height:20px;
border:solid 5px red;
float:right;
}
Ver codigo en jsfiddle . agrega márgenes a los divs si quieres
Estoy seguro de que obtendrás algo mejor, pero para empezar, esto parece funcionar. en la hoja de css
#box1{
background-color:#FFFF99;
width: 350px;
height: auto;
float: left;
position:absolute;
bottom: 0;
}
#box2{
background-color:#CCFF99;
width:350px;
left: 500px;
position: absolute;
bottom: 0;
}
en el html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="try2.css" />
</head>
<body>
<div id="box1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="box2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Creo que necesitas una posición de izquierda absoluta para el segundo cuadro.
Lo que funcionó para mí fue aplicar este estilo a ambos divs:
.bottom-align {vertical-align: bottom; pantalla: bloque en línea; flotar: ninguno; }
Luego, entre ambos divs tuve que eliminar el pseudoespacio agregando un comentario en blanco:
</div><!-- ---><div>
No estoy 100% seguro, pero algo como esto debería funcionar:
<div class="wrapper">
<div class="orange"></div>
<div class="green"></div>
</div>
div.wrapper div {
position: relative;
float: left;
bottom: 0px;
}
Puede que ni siquiera necesite el flotador.
https://jsfiddle.net/panosang/96bnt3xa/
Después de algunas horas de trabajo y un terrible dolor de cabeza, creo que la solución perfecta es agregar algunos elementos de margin-botton y margin-top .
Realmente odio agregar píxeles específicos o cambiar el porcentaje cada vez en mi archivo CSS, pero lo encontré como la solución perfecta para mi problema.
Utilicé <table> lugar de <div> , pero también funciona con <div> .
Consulte: http://jsfiddle.net/thirtydot/J9eds/
He usado display: inline-block combinado con vertical-align: bottom .
HTML:
<div id="container">
<div id="left">
left<br />left<br />left<br />left<br />left<br />left<br />
leftleftleftleftleftleft
</div>
<div id="right"></div>
</div>
CSS:
#container {
border: 1px solid red;
float: left;
}
#left, #right {
border: 2px solid red;
background: #ccc;
vertical-align: bottom;
display: inline-block;
/* ie6/7 */
*display: inline;
zoom: 1;
}
#right {
margin: 20px 20px 0 20px;
padding: 20px;
width: 100px;
}