una poner otro otra misma linea lado imagen horizontalmente elemento divs div debajo como colocar bootstrap alinear css layout html

css - poner - Cómo colocar dos divs horizontalmente en otro div



poner dos div en la misma linea (13)

No he jugado con CSS durante mucho tiempo y no tengo referencias en este momento. Mi pregunta debería ser bastante fácil, pero buscar en Google no brinda una respuesta suficiente. Entonces, agregando al conocimiento colectivo ...

|#header---------------------------------------------------------------| | TITLE | |#sub-title------------------------------------------------------------| |bread > crumb | username logout | |#sub-left | #sub-right| |---------------------------------|------------------------------------|

Eso es lo que quiero que sea mi diseño. El encabezado de todos modos. Quería que el subtítulo contenga sub-izquierda Y sub-derecha. ¿Qué reglas css uso para asegurar que un div esté vinculado por los atributos de otro div? En este caso, ¿cómo me aseguro de que la sub-izquierda y la sub-derecha permanezcan dentro del subtítulo?

A través de Bootstrap Grid , puede obtener fácilmente la solución compatible con navegador cruzado.

<div class="container"> <div class="row"> <div class="col-sm-6" style="background-color:lavender;"> Div1 </div> <div class="col-sm-6" style="background-color:lavenderblush;"> Div2 </div> </div> </div>

jsfiddle: http://jsfiddle.net/DTcHh/4197/

Algo como esto quizás ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> #container { width:600px; } #head, #sub-title { width:100%; } #sub-left, #sub-right { width:50%; float:left; } </style> </head> <body> <div id="container"> <div id="head"> #head </div> <div id="sub-title"> #sub-title <div id="sub-left"> #sub-left </div> <div id="sub-right"> #sub-right </div> </div> </div> </body> </html>

Cuando flotas sub-left y sub-right , ya no ocupan ningún espacio dentro del sub-title . Necesita agregar otro div con style = "clear: both" debajo de ellos para expandir el div que lo contiene o aparecen debajo de él.

HTML:

<div id="sub-title"> <div id="sub-left"> sub-left </div> <div id="sub-right"> sub-right </div> <div class="clear-both"></div> </div>

CSS:

#sub-left { float: left; } #sub-right { float: right; } .clear-both { clear: both; }

El mejor y simple enfoque con css3

#subtitle{ /*for webkit browsers*/ display:-webkit-box; -webkit-box-align:center; -webkit-box-pack: center; width:100%; } #subleft,#subright{ width:50%; }

En lugar de utilizar overflow:hidden , que es una especie de hack, ¿por qué no simplemente establecer una altura fija, por ejemplo, height:500px , en la división principal?

Es un concepto erróneo bastante común que necesita una clear:both div en la parte inferior, cuando realmente no lo hace. Si bien la respuesta de foxy es correcta, no necesitas esa div de compensación no semántica e inútil. Todo lo que necesita hacer es colocar un overflow:hidden en el contenedor:

#sub-title { overflow:hidden; }

Esta respuesta se suma a las soluciones anteriores para abordar su última oración que dice:

cómo me aseguro de que la sub-izquierda y la sub-derecha permanezcan dentro del subtítulo

El problema es que a medida que el contenido de la sub-izquierda o la sub-derecha se expande, se extenderá por debajo del subtítulo. Este comportamiento está diseñado en CSS, pero causa problemas para la mayoría de nosotros. La solución más sencilla es tener un div que tenga el estilo de la declaración CSS Clear.

Para hacer esto, incluya una declaración de CSS para definir un div de cierre (puede ser Clear Left o RIght en lugar de ambos, dependiendo de qué declaraciones de Float se hayan usado:

#sub_close {clear:both;}

Y el HTML se convierte en:

<div id="sub-title"> <div id="sub-left">Right</div> <div id="sub-right">Left</div> <div id="sub-close"></div> </div>

Lo siento, me di cuenta de que esto fue publicado anteriormente, ¡no debería haber hecho esa taza de café mientras escribía mi respuesta!

@Darko Z: tienes razón, la mejor descripción para el desbordamiento: la solución automática (o desbordamiento: oculto) que he encontrado estaba en una publicación en SitePoint hace un tiempo Simple Clearing of FLoats y también hay una buena descripción en un 456bereastreet artículo CSS Consejos y trucos Parte 2 . Tengo que admitir que soy demasiado perezoso para implementar estas soluciones yo mismo, ya que el acuerdo de cierre funciona bien, aunque, por supuesto, es muy poco elegante. Así que haré un esfuerzo de ahora en adelante para limpiar mi acto.

Esto debería hacer lo que estás buscando:

<html> <head> <style type="text/css"> #header { text-align: center; } #wrapper { margin:0 auto; width:600px; } #submain { margin:0 auto; width:600px; } #sub-left { float:left; width:300px; } #sub-right { float:right; width:240px; text-align: right; } </style> </head> <body> <div id="wrapper"> <div id="header"><h1>Head</h1></div> <div id="sub-main"> <div id="sub-left"> Right </div> <div id="sub-right"> Left </div> </div> </div> </body> </html>

Y puede controlar todo el documento con la clase contenedora, o solo las dos columnas con la clase principal secundaria.

Estoy de acuerdo con Darko Z en aplicar "desbordamiento: oculto" al # subtítulo. Sin embargo, debe mencionarse que el método de desbordamiento: oculto de los flotadores no funciona con IE6 a menos que tenga un ancho o una altura especificados. O bien, si no desea especificar un ancho o alto, puede usar "zoom: 1":

#sub-title { overflow:hidden; zoom: 1; }

Lo haces así:

<table> <tr> <td colspan="2">TITLE</td> </tr> <tr> <td>subleft</td><td>subright</td> </tr> </table>

FÁCIL - me llevó 1 minuto escribirlo. Recuerde que el archivo CSS necesita ser descargado al cliente, así que no se preocupe por el waffle sobre las etiquetas adicionales, en este caso, es algo que no se debe evitar.

También puede lograr esto utilizando un marco de grillas CSS, como grillas YUI o CSS de impresión azul . Resuelven muchos de los problemas del navegador cruzado y hacen posibles diseños de columnas más sofisticados para usar simples mortales.

#sub-left, #sub-right { display: inline-block; }