1

Tengo una etiqueta div y necesito que algunos objetos estén alineados a la derecha y otros a la izquierda y que se vean a la misma altura dentro de la pantalla.

Este es mi código:

<div align="justify">
    <table>
        <tr>
            <td>
                <asp:Image ID="Image2" runat="server" Height="100px" Width="150px" ImageUrl="~/View/Imagen/sca.JPG" Visible="false" />
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;&nbsp;<asp:Label ID="Label1" runat="server" Text="Label" Font-Size="190%" ForeColor="Gray" Visible="False"></asp:Label>&nbsp;&nbsp;
            </td>
        </tr>
    </table>
 </div>
<div align="right">
    <table>
        <td>
            <asp:TextBox ID="TextBox1" runat="server" Height="46px" Width="306px" BackColor="#CCCCCC" BorderColor="#666666" Font-Size="20pt" 
                         BorderStyle="Solid" ForeColor="#666666" ToolTip="INGRESE APELLIDO O NOMBRE PARA LA BUSQUEDA"></asp:TextBox>
        </td>
        <td>
            <asp:ImageButton ID="ImageButton1" runat="server" Height="63px" Width="93px" ImageUrl="~/View/Imagen/lupa.JPG" 
                             ToolTip="BUSCAR POR APELLIDO O NOMBRE EN GRUPO SELECCIONADO" BorderWidth="0px" OnClick="ImageButton1_Click" />
        </td>
    </table>
</div>

Y esta es la imagen de lo que espero obtener:

Resultado a esperar

NOTA: La etiqueta y la caja de texto deben estar a la misma altura.

2 respuestas 2

2

Bueno, no deberías usar tablas para crear layouts, además no logro ver cual es el comportamiento deseado para la imagen, así que haciendo modificaciones menores a tu código y aprovechando las bondades de flexbox, este sería el resultado:

div {
  border: solid 1px;
  padding: 5px;
}

.container {
  display: flex;
  justify-content: space-between;
}

.container .c-left table,
.container .c-left tbody {
  display: flex;
  flex-direction: column-reverse;
}
<div class="container">
    <div class="c-left">
        <table>
            <tr>  
                <td><img src="http://lorempixel.com/200/200/nature"></td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;etiqueta&nbsp;&nbsp;</td>
            </tr>
        </table>
    </div>
    <div class="c-right">
        <table>
            <td><input type="text"></td>
            <td ><button>boton</button></td>
        </table>
    </div>
</div>

4
  • Gracias , pruebo y te comento...bueno la verdad el diseño no es mi fortaleza....gracias el 18 ago. 2016 a las 16:28
  • De hecho esto no es diseño ;)
    – Shaz
    el 18 ago. 2016 a las 18:35
  • Muy bueno resulto bien era lo q buscaba el 19 ago. 2016 a las 14:20
  • Si te sirvió la respuesta, puedes considerar aceptarla.
    – Shaz
    el 19 ago. 2016 a las 14:21
0

Hola desconozco el alcanze del tu proyecto pero si este te lo permite puedes usar un framework que facilite tu labor como puede ser boostrap o materialize.

So exelentes para crear diseños adaptables y sus grids facilitan mucho pero mucho el trabajo.

1
  • 1
    Josue, gracias por el aporte pero infortunadamente esto no responde la pregunta, podrías dar un ejemplo relacionado directamente con el problema de Efrain?
    – Shaz
    el 18 ago. 2016 a las 16:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.