La mejor manera de implementar un 3-columna de sitio web utilizando <DIV> etiquetas?[cerrado]

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

  •  01-07-2019
  •  | 
  •  

Pregunta

Estoy desarrollando un 3-columna de sitio web usando un diseño como este:

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

Pero, teniendo en cuenta el CSS predeterminado 'posición' de la propiedad de <DIV>'s es "estático", mi <DIV>'s se muestra una debajo de la otra, como se esperaba.

Así que me puse a la propiedad CSS 'la posición' a 'relativa', y cambió el 'top' de la propiedad de la 'media' y 'derecha' <DIV>'s a -(menos) a la altura de los anteriores <DIV>.Funcionó bien, pero este enfoque me trajo dos problemas:

1) aunque Internet Explorer 7 muestra tres columnas correctamente, mantiene la barra de desplazamiento vertical, como si el <DIV>'s fueron colocados uno debajo del otro, y hay un montón de espacio en blanco después de que el contenido es más.Me gustaría n'como para tener que.

2) La altura de estos elementos es variable, así que realmente no sabe qué valor establecido para cada <DIV>'s 'top' de la propiedad;y no me gustaría para codificarlo.

Así que mi pregunta es, ¿cuál sería la mejor (simple + elegante) para implementar este diseño?Me gustaría evitar el posicionamiento absoluto , y también he de mantener mi diseño tableless.

¿Fue útil?

Solución

Si aún no lo ha comprobado Una Lista Aparte usted debe, ya que contiene algunos de los excelentes tutoriales y guías para el diseño de páginas web.

Este artículo en particular, deberían ayudarte.

Otros consejos

Dar BluePrint CSS un intento.Es realmente simple para empezar con el, pero suficientemente potente para la mayoría de las aplicaciones.

Fácil de entender tutoriales y ejemplos.Tiene una tipografía de la biblioteca que produce resultados decentes directamente de la caja.

Por lejos la forma más fácil que he encontrado para hacer 3 columnas (o cualquier otro número de columnas divididos por el espacio disponible en formas extrañas) es YUI Rejillas.Hay un YUI Generador de Mallas para darle el diseño básico.El siguiente le dará una 750px amplia básicos de diseño de la columna 3 (split 1/3 1/3 1/3) con un 160px barra lateral izquierda.Cambiar a otros anchos, de la barra lateral configs y la columna se divide es realmente fácil.

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"> 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>

Hay un número de ejemplos y de las bibliotecas por ahí que usted puede buscar en una pareja ya lista (Una Lista Aparte es una lectura obligada).

He usado el Yahoo Interfaz de Usuario de la Biblioteca (YUI) en mi último par de sitios y realmente me gusta.Yahoo completamente soporta y es fácil de entender y de usar.Aquí hay CSS para las Rejillas de, que permite dar formato a su página en tantas columnas y secciones como desee.

YUI es bueno porque usted no tiene que reinventar la rueda para la fundación de su sitio, y ellos hacen todo el trabajo de asegurarse de que sus bases de trabajo en todos los navegadores.Y lo mejor de todo es que es gratis.

Me gusta 960 Grid System.Es ligera, fácil de usar css que devides la pantalla en 12 (o 16) columnas.Usted puede utilizar para un 3 columna diseñar y alinear el resto de su contenido en consecuencia.

Trate de flotar el div a la izquierda, que va a mantener a todos en la misma línea - suponiendo que no hay suficiente espacio.

Para fijar la columna, ajuste de altura:xxxpx se les hace iguales.

El uso de este 3 diseño de la columna generador para tratar de.

Este código funciona en mi computadora con internet explorer 8, Chrome, Firefox. 

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>

En primer lugar, la posición relativa hace lo que te he descrito:se reserva espacio en la ubicación original, pero muestra el DIV compensado por una cierta cantidad.

Si flotan los DIVs, a continuación, van a la pila de la izquierda-a-derecha, pero esto puede causar problemas.

Un diseño de tres columnas con CSS es bastante duro.Eche un vistazo a [http://www.glish.com/css/7.asp]

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top