¿Cuál es la mejor manera de alinear a la derecha y alinear a la izquierda dos etiquetas div en una página web horizontalmente una al lado de la otra? Me gustaría una solución elegante para hacer esto si es posible.¿Cuál es la mejor manera de alinear a la izquierda y alinear a la derecha dos etiquetas div?
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
<style>
#div1, #div2 {
float: left; /* or right */
}
</style>
Como una forma alternativa de flotación:
<style>
.wrapper{position:relative;}
.right,.left{width:50%; position:absolute;}
.right{right:0;}
.left{left:0;}
</style>
...
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
Teniendo en cuenta que no hay necesidad de colocar el div .left como absoluto (dependiendo de su dirección, este podría ser el uno .RIGHT) debido a que estaría en la posición deseada en flujo natural de código html.
esta solución funciona también con IE7 (la respuesta aceptada no: la div derecha se flotará a la derecha sino también 1 desglose) – firepol
'.right, .left {ancho: 50%; display: inline-block} ' – sepehr
Si tiene un div debajo de la envoltura div, tomará el lugar de la envoltura div, un efecto no deseado. –
Puede hacerlo con algunas líneas de código CSS. Puede alinear todas las divisiones que desee que aparezcan una al lado de la otra a la derecha.
<div class="div_r">First Element</div>
<div class="div_r">Second Element</div>
<style>
.div_r{
float:right;
color:red;
}
</style>
utilizar el relleno etiquetas de las etiquetas flotar por encima aún no ha resuelto, que utilizan
padding left:5px;
padding left :30px
utilicé el siguiente. El elemento de género comenzará donde termina el elemento DJ,
<div>
<div style="width:50%; float:left">DJ</div>
<div>genre</div>
</div>
perdón la línea css.
Esta solución ha dejado el texto alineado y el botón en el extremo derecho.
Si alguien está buscando una respuesta de diseño de material:
<div layout="column" layout-align="start start">
<div layout="row" style="width:100%">
<div flex="grow">Left Aligned text</div>
<md-button aria-label="help" ng-click="showHelpDialog()">
<md-icon md-svg-icon="help"></md-icon>
</md-button>
</div>
</div>
Se puede utilizar una etiqueta div padres así:
<!doctype html>
<html>
<head>
<style>
.parent{
text-align:center;
}
.child{
width:45%;
display:inline-block;
border:1px solid #cccccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">First Element</div>
<div class="child">Second Element</div>
</div>
</body>
</html>
duplicado posible de [¿Cuál es la mejor manera de alinear dos inline abarcar elementos a la izquierda y a la derecha sin flotar?] (http://stackoverflow.com/questions/41951530/what-is-the-best-way-to-align-two-inline-span-elements-to-left-and -right-without) –