web design de três colunas com lados variáveis

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

  •  09-06-2019
  •  | 
  •  

Pergunta

Tenho tentado encontrar uma maneira de criar um web design de 3 colunas em que a coluna central tenha uma largura constante e esteja sempre centralizada.As colunas à esquerda e à direita são variáveis.Isso é trivial em tabelas, mas não é correto semanticamente.Não consegui fazer isso funcionar corretamente em todos os navegadores atuais.Alguma dica sobre isso?

Foi útil?

Solução

Usar esta técnica, e simplesmente especifique uma largura fixa para a coluna central.

Outras dicas

Veja isso: http://www.glish.com/css/2.asp

E substitua a largura:xx% para #maincenter por um valor fixo.Parece funcionar quando eu mudo com o Firebug, vale a pena tentar?

#maincenter {
    width: 200px;
    float:left;
    background:#fff;
    padding-bottom:10px;
    }

Acho que você precisaria começar com larguras iniciais (fixas) para ambas as colunas da barra lateral e então, quando a página carregar, usar javascript para obter a largura da janela e calcular a nova largura das barras laterais.

largura da barra lateral = (largura da janela - largura da coluna central) / 2

Você poderá então reaplicar o javascript se a janela for redimensionada.

Este artigo em A List Apart tem uma solução que resulta em um layout de 3 colunas que irá:

  • ter um centro fluido com barras laterais de largura fixa,

  • permitir que a coluna central apareça primeiro na fonte,

  • permitir que qualquer coluna seja a mais alta,

  • requerem apenas um único div extra de marcação, e

  • requerem CSS muito simples, com patches mínimos.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top