Meu único problema é fazer com que eles se alinhem com três lados e tenham espaçamento igual. Aparentemente, spans não podem ter largura e divs (e spans com display: block) não aparecem horizontalmente um ao lado do outro. Sugestões?
<div style='width:30%; text-align:center; float:left; clear:both;'> É o que tenho agora.
Respostas:
Você pode usar divs com o float: left;atributo que fará com que eles apareçam horizontalmente um ao lado do outro, mas você pode precisar limpar os seguintes elementos para garantir que eles não se sobreponham.
overflow: hidden. Consulte: stackoverflow.com/questions/323599/…
padding-leftno div à direita, ela será ignorada.
<div style="display: in-line"></div><div style="display: in-line"></div>deve funcionar bem.
overflow: hiddené a melhor solução.
Você pode usar
.floatybox {
display: inline-block;
width: 123px;
}Se você só precisa oferecer suporte a navegadores com suporte para blocos inline. Os blocos embutidos podem ter largura, mas são embutidos, como os elementos de botão.
Ah, e você pode querer adicionar alinhamento vertical: topo nos elementos para garantir que as coisas estejam alinhadas
<style>
#whatever div {
display: inline;
margin: 0 1em 0 1em;
width: 30%;
}
</style>
<div id="whatever">
<div>content</div>
<div>content</div>
<div>content</div>
</div>Tecnicamente, um Span é um elemento embutido, porém pode ter largura, você só precisa definir sua propriedade de exibição para bloquear primeiro. No entanto, neste contexto, um div é provavelmente mais apropriado, pois estou supondo que você deseja preencher esses divs com conteúdo.
Uma coisa que você definitivamente não quer fazer é clear:bothdefinir os divs. Definir dessa forma significa que o navegador não permitirá que nenhum elemento fique na mesma linha que eles. O resultado, seus elementos se acumularão.
Observe o uso de display:inline. Isso lida com o bug de duplicação da margem ie6. Você pode resolver isso de outras maneiras, se necessário, por exemplo, folhas de estilo condicionais.
Eu adicionei um wrapper (# seja lá o que for), pois estou supondo que esses não serão os únicos elementos na página, então quase certamente você precisará separá-los dos outros elementos da página.
De qualquer forma, espero que isso seja útil.
Eu faria algo assim, pois dá a você 3 colunas de tamanho uniforme, espaçamento e escalas (regulares) iguais. Observação: isso não foi testado, portanto, pode precisar de ajustes para navegadores mais antigos.
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>Eu usaria:
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>É a primeira vez que uso esta 'ferramenta de código' do estouro ... mas devo fazer isso agora ...
O que você gostaria de fazer é procurar layouts baseados em grade CSS. Este método de layout envolve a especificação de algumas classes CSS para alinhar o conteúdo da página a uma estrutura de grade. Está mais relacionado com o layout de impressão do que com base na web, mas é uma técnica usada em muitos sites para fazer o layout do conteúdo em uma estrutura sem ter que recorrer a tabelas.
Experimente isso para iniciantes da Smashing Magazine.
Observe a propriedade css Float. http://w3schools.com/css/pr_class_float.asp
Funciona com elementos de bloco como div. Alternativamente, o que você está tentando mostrar, as tabelas não são ruins se você está realmente tentando mostrar uma tabela com algumas informações.
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>outro ... tente usar float: left;ou right;, troque o widthpor outros valores ... deve funcionar ... note também que os 10% que não são usados pelo div estão entre eles ... desculpe pelo inglês ruim :)