Precisa css div genérica que não se sobreponha (como uma mesa)

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

  •  05-09-2019
  •  | 
  •  

Pergunta

Eu estou tentando usar divs em vez de tabelas para caixas de estilo em volta do meu conteúdo. O conteúdo pode ser qualquer tamanho e necessidades para permitir que o navegador para ser redimensionada em qualquer grau . Precisa a cor do fundo ea beira para conter o conteúdo . Esta multa trabalha com tabelas. Como faço para obter uma div para trabalhar da mesma maneira?

Nota:. Eu adicionei "_" é porque meus espaços não-quebrando estavam se perdendo

Amostra Página

Exemplo de imagem

text alt
(fonte: c3o.com )

Conteúdo: 

<style type="text/css">
    div.box, table.box
    {
        padding: 10px 1000px 10px 10px;
    }

    div.box-header, td.box-header
    {
        border:  solid  1px  #BBBBBB ;
        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    }   

    div.box-body, td.box-body
    {
        padding: 6px;
        border:  solid  1px  #BBBBBB ;
        border-top: none;
    }
</style>


<div class="box">
    <div class="box-header">please_help_make_these_divs_stop_overlapping</div>
    <div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>

<table class="box" width="100%" cellpadding="0" cellspacing="0">
    <tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
    <tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>
Foi útil?

Solução

Não há nenhuma maneira fácil de fazer isso que é crossbrowser amigável que eu saiba.

Pelo menos no firefox você pode criar uma tabela simulado, definindo divs com 

display:table;
display:table-row;
display:table-cell;

Assim que essas divs funcionam como elementos da tabela. Em seguida, a caixa irá contê-lo do conteúdo. O tempo que isso é uma boa solução ou não é discutível.

Eu tenho tido problemas semelhantes com layouts de página mim mesmo. Normalmente eu já resolveu os de configuração min-width e overflow: auto;

Outras dicas

Se você realmente não quiser usar uma tabela que você pode fazer isso: 

div.box div {
  overflow: hidden;
  zoom: 1; /* trigger haslayout for ie */
}

Da próxima vez que este tipo de problema surge ir para giveupandusetables.com .

Uma maneira é fazer com que suas caixas de carros alegóricos. Adicionar float: left; a caixa, a caixa-de cabeçalho, e a caixa de corpo. Adicionar clear: both; a caixa-corpo para forçá-lo abaixo da caixa-de cabeçalho. Você provavelmente vai precisar adicionar propriedade claro para qualquer conteúdo segue bem.

Você não terá bordas direita da caixa-header e caixa-corpo para alinhar, no entanto. Se você quiser suas larguras de ser o mesmo, você realmente quer uma mesa. Tabela é uma ferramenta para fazer todas as células na mesma coluna para compartilhar as larguras.

Para outras idéias, veja esta pergunta SO .

Em primeiro lugar, você deve estar usando marcação semântica. Se algo é uma marca de cabeçalho e conteúdo-lo como tal, com tags de cabeçalho e parágrafo. Isso vai ajudá-lo a sair da 'mesa-way' do pensamento você estava tentam imitar sua marcação e estilos como uma tabela, a marcação deve vir em primeiro lugar, CSS pode vir depois.

A seguir deve fazer o que quiser: 

<style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>

<div class='box'>
    <h3>please help make these divs stop overlapping</h3>
    <p>please help make these divs stop overlapping</p>
</div>

Thinking sobre marcação e estilo separado é o caminho para CSS Zen Mastery: o)

Isso funciona (na verdade mantém juntos melhor do que tabelas no IE7 também) 

div.box{
  float:left;
  width:auto;
  margin: 10px 1000px 10px 10px;
}

div.box-header{
  float:left;
  width:100%;
  border:  solid  1px  #BBBBBB ;
  font-size: larger;
  padding: 4px; 
  background-color: #DDDDDD;
}

div.box-body{
  clear:left;
  float:left;
  width:100%; 
  padding: 4px; 
  border:  solid  1px  #BBBBBB ; 
  border-top: none;
}

NOTA: ambas as caixas tem que ter mesmo esquerda e estofamento direita ou um sobressai um pouco

.

flutua não são necessários, mas você parece estar confundindo os usos de preenchimento margem vs.. Os seguintes pequenos ajustes ao seu estilo funciona como você precisa dele para: 

<style type="text/css">
    div.box, table.box
    {
        margin: 10px 1000px 10px 10px;
        border:  solid  1px  #BBBBBB ;
       padding: 0px;
    }

    div.box-header, td.box-header
    {

        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    border-bottom:  solid  1px  #BBBBBB ;

    }   

    .box-body, td.box-body
    {
        padding: 6px;
    }
</style>

Eu mudei o preenchimento na caixa a uma margem, mudou-se a fronteira para a sua caixa, e acrescentou um sublinhado para o cabeçalho.

Eu tive esse problema também usando o Firefox 6.0.1, Opera 10,62, Safari 5.1, mas não no IE 9, eo overflow: auto fixa-lo em todos os navegadores. Nada mais fez. Eu também tentei overflow:. Contêm, que também resolveu o problema, mas parece que contêm não é um valor válido para estouro, então eu estou supondo que, desde que o valor não era válido, auto foi substituído

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