¿Cuál es la mejor forma de colocar un div en el css?

StackOverflow https://stackoverflow.com/questions/61155

  •  09-06-2019
  •  | 
  •  

Pregunta

Estoy tratando de colocar este menú:

<div class="left-menu" style="left: 123px; top: 355px">  
    <ul>  
        <li> Categories </li>  
        <li> Weapons </li>  
        <li> Armor </li>  
        <li> Manuals </li>  
        <li> Sustenance </li>  
        <li> Test </li>  
    </ul>  
</div>

En el lado izquierdo de la página.El problema es que si uso absolutos o valores fijos.
Los diferentes tamaños de pantalla hará que la barra de navegación de manera diferente.También tengo una segunda div que contiene todo el contenido principal que también necesita ser movido a la derecha, hasta el momento estoy usando valores relativos que parece que funciona, no importa el tamaño de la pantalla.

¿Fue útil?

Solución

float es de hecho el derecho de propiedad para lograr esto.Sin embargo, el ejemplo dado por bmatthews68 puede ser mejorado.La cosa más importante acerca de cajas flotantes es que debe especificar explícito de ancho.Esto puede ser muy incómodo, pero esta es la forma en CSS funciona.Sin embargo, observe que px es una unidad de medida que no tiene lugar en el mundo de HTML/CSS, al menos no para especificar anchos.

Siempre recurren a medidas que va a trabajar con diferentes tamaños de fuente, es decir,utilizar em o %.Ahora, si el menú está implementado como un cuerpo flotante, entonces esto significa que el contenido principal flota "alrededor" de ella.Si el contenido principal es mayor que el menú, esto podría no ser lo que usted desea:

float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png

<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>

Puede corregir este comportamiento, dando el contenido principal de un margin-left igual a la anchura del menú:

float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png

<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>

En la mayoría de los casos, usted también quiere dar el contenido principal de un padding-left para que no se "pegue" al menú muy de cerca.

Por cierto, es trivial para cambiar el anterior para que el menú está en el lado derecho en lugar del izquierdo:simplemente cambiar todas las ocurrencias de la palabra "izquierda" a "derecha".

Ah, una última cosa.Si el menú del contenido es mayor que el contenido principal, va a hacer que extrañamente porque float hace algunas cosas raras.En ese caso, tendrás que limpiar la caja en la que viene debajo del cuerpo flotante, como en bmatthews68 del ejemplo.

/EDIT:Maldita sea, HTML no funciona de la forma en que la vista previa se lo mostró.Bueno, he incluido imágenes en su lugar.

Otros consejos

Creo que usted se supone que el uso de la flotador propiedad para el posicionamiento de cosas. Usted puede leer sobre él aquí.

Todas las respuestas diciendo que el uso de flotadores (con el consentimiento explícito anchos) son correctas.Pero la respuesta a la pregunta original, ¿cuál es la mejor manera para la posición de un <div>?Depende.

CSS es muy contextual, y el flujo de una página depende de la estructura del HTML.Flujo Normal es cómo los elementos, y sus hijos, se diseño la parte superior a la parte inferior (para los elementos de bloque y de izquierda a derecha (para los elementos en línea) en el interior de su bloque que contiene (generalmente el padre).Esta es la forma en que la mayoría de su diseño debería funcionar.Se tienden a confiar en width, margin, y padding para definir el espaciado y el diseño de los elementos a los otros elementos de su alrededor (se que <div>, <ul>, <p>, o de lo contrario, HTML es principalmente semántica en este punto).

Utilización de estilos como float o absolute o relative el posicionamiento puede ayudarle a alcanzar metas muy específicas de su diseño, pero es importante saber cómo usarlos.Como ha sido explicado, float generalmente se utiliza para colocar los elementos de bloque uno al lado del otro, y es realmente bueno para los diseños de varias columnas.

No voy a entrar en más detalles aquí, pero usted puede ser que desee comprobar hacia fuera el siguiente:

Usted debe utilizar el flotar y atributos CSS para conseguir el efecto deseado.

En primer lugar me estilos definidos para la llamada a la izquierda y a la derecha de las dos columnas en mi diseño y un estilo más claro se utiliza para restablecer el flujo de la página.

<style type="text/css">
.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 800px;
}
.clear {
    clear: both;
    height: 1px;
}
</style>

Entonces yo los uso para diseño de mi página.

<div>
 <div class="left">
   <ul>
    <li>Categories</li>
    <li>Weapons</li>
    <li>Armor</li>
    <li>Manuals</li>
    <li>Sustenance</li>
    <li>Test</li>
  </ul> 
 </div>
 <div class="right">
   Blah Blah Blah....
 </div>
</div>
<div class="clear" />

usted puede utilizar float

<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>

en el archivo css

.left-menu{float:left;width:200px;}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top