¿Cómo alinear horizontalmente tres divs?

publicado por: Anonymous

Tengo este codigo y me debería alinear los divs en una línea pero no lo hace…

El content es el bloque que engloba todos y luego los tres divs form1 try y form2.

Alguien me sabria decir que falla.

_x000D_

_x000D_

.content{_x000D_
        margin-left:100px;_x000D_
	font-size: 12px;_x000D_
	font-family:Verdana;_x000D_
	border: 2px solid #CCC;_x000D_
	width: 75%;_x000D_
	height: 25%;_x000D_
	background-color:#FAFAFA;_x000D_
}_x000D_
/* LOS tres FORMULARIOS*/_x000D_
.form1{_x000D_
        text-align: center;_x000D_
        border: 2px solid #CCC;_x000D_
	height: 200px;_x000D_
	width: 35%;_x000D_
	float:left;_x000D_
}_x000D_
.try {_x000D_
        _x000D_
     margin-left:280px;_x000D_
     width: 15%;_x000D_
     height: 200px;_x000D_
     border: 2px solid #CCC;_x000D_
}_x000D_
.form2{_x000D_
        float:right;_x000D_
	border: 2px solid #CCC;_x000D_
	height: 200px;_x000D_
	width: 35%;_x000D_
	margin-left:415px;_x000D_
	_x000D_
}

_x000D_

<div class="content">_x000D_
        <div class= "tituloCliente">_x000D_
            <p>Datos del Cliente</p>_x000D_
        </div>_x000D_
        <div class="form1">_x000D_
            <form action="/action_page.php">_x000D_
                <table>_x000D_
                    <tr>_x000D_
                        <td>Cliente:</td>_x000D_
                        <td><label for="codigoClient">00005120</label></td> _x000D_
                        <td><label for="nomClient"></label></td> _x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                        <td>Persona de contacto:</td>_x000D_
                        <td><input type="text" name="customerContact"></td>_x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                        <td>Email comercial:</td>_x000D_
                        <td><input type="text" name="email"></td>_x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                        <td>Telefono:</td>_x000D_
                        <td><input type="text" name="telf"></td>_x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                        <td>FAX:</td>_x000D_
                        <td><input type="text" name="fax"></td>_x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                        <td>Direccion principal:</td>_x000D_
                        <td><label for="direcc"></label></td>_x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                        <td>Comentarios:</td>_x000D_
                        <td><label for="coments"></label></td>_x000D_
_x000D_
                    </tr>_x000D_
                 _x000D_
                </table>_x000D_
_x000D_
            </form> _x000D_
        </div>_x000D_
        <div class="try">_x000D_
           <button>Search</button>_x000D_
            </div>_x000D_
        <div class="form2">_x000D_
            <form action="/action_page.php">_x000D_
                <table >_x000D_
                    <tr>_x000D_
                        <td>NIF:</td>_x000D_
                        <th><label for="nif"></label></th>_x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                        <td>Tipo de Pago:</td>_x000D_
                        <td><label for="payType"></label></td>_x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                        <td>Condiciones de pago:</td>_x000D_
                        <td><label for="condOfPay"></label></td>_x000D_
                    </tr>_x000D_
                    <tr>_x000D_
                        <td>Tarifa:</td>_x000D_
                        <td><label for="tarifa"></label></td>_x000D_
                    </tr>_x000D_
                </table>_x000D_
            </form> _x000D_
_x000D_
        </div>_x000D_
    </div>	

_x000D_

_x000D_

_x000D_

solución

Puedes hacerlo ajustando los width de cada form con sus márgenes pero en mi caso he optado por usar el display: flex (puedes informarte de como funciona el flexbox en navegadores, es una forma de usar el grid muy simple).

De todas maneras aqui te dejo un codepen para que lo pruebes y entiendas mejor el funcionamiento https://codepen.io/DSGDSR/pen/GQMzoQ

Aquí te dejo el código con la explicación:

En el html he incluido los forms en un div con clase .forms para aplicarle el flexbox sin que le afecte al titulo (Datos de cliente)

<div class="content">
    <div class="tituloCliente">
        <p>Datos del Cliente</p>
    </div>

    <!-- He incluido los forms en un div con clase .forms para aplicarle el flexbox sin que le afecte al titulo (Datos de cliente) -->
    <div class="forms">
        <div class="form1">
            <form action="/action_page.php">
                <table>
                    <tr>
                        <td>Cliente:</td>
                        <td><label for="codigoClient">00005120</label></td>
                        <td><label for="nomClient"></label></td>
                    </tr>
                    <tr>
                        <td>Persona de contacto:</td>
                        <td><input type="text" name="customerContact"></td>
                    </tr>
                    <tr>
                        <td>Email comercial:</td>
                        <td><input type="text" name="email"></td>
                    </tr>
                    <tr>
                        <td>Telefono:</td>
                        <td><input type="text" name="telf"></td>
                    </tr>
                    <tr>
                        <td>FAX:</td>
                        <td><input type="text" name="fax"></td>
                    </tr>
                    <tr>
                        <td>Direccion principal:</td>
                        <td><label for="direcc"></label></td>
                    </tr>
                    <tr>
                        <td>Comentarios:</td>
                        <td><label for="coments"></label></td>

                    </tr>

                </table>

            </form>
        </div>
        <div class="try">
            <button>Search</button>
        </div>
        <div class="form2">
            <form action="/action_page.php">
                <table>
                    <tr>
                        <td>NIF:</td>
                        <th><label for="nif"></label></th>
                    </tr>
                    <tr>
                        <td>Tipo de Pago:</td>
                        <td><label for="payType"></label></td>
                    </tr>
                    <tr>
                        <td>Condiciones de pago:</td>
                        <td><label for="condOfPay"></label></td>
                    </tr>
                    <tr>
                        <td>Tarifa:</td>
                        <td><label for="tarifa"></label></td>
                    </tr>
                </table>
            </form>

        </div>
    </div>
</div>

Y en el css el funcionamiento del grid usando flexbox. ajustando los respectivos width de cada formulario se ajustara el margen tambien abajo explico el justify-content: space-around

.content {
    margin-left: 100px;
    font-size: 12px;
    font-family: Verdana;
    border: 2px solid #ccc;
    width: 75%;
    height: 25%;
    background-color: #fafafa;
}
.forms {
    display: flex;
    justify-content: space-around;
}
/* LOS tres FORMULARIOS*/
.form1 {
    float: left;
    text-align: center;
    border: 2px solid #ccc;
    height: 200px;
    width: 40%;
}
.try {
    float: left;
    height: 200px;
    border: 2px solid #ccc;
    width: 20%;
}
.form2 {
    float: left;
    border: 2px solid #ccc;
    height: 200px;
    width: 35%;
}

Funcionamiento del justify-content: space-around (requiere el display: flex)
Los items flex se alinean uniformemente de tal manera que el espacio entre dos items adyacentes es el mismo. El espacio vacío anterior al primer item y posterior al último item equivale a la mitad del espacio entre dos items adyacentes.

Aún así si todavía estas aprendiendo te recomendaría usar el sistema de grid de Bootstrap o frameworks como FlexboxGrid

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.