¿Cómo alineo tramos o divs horizontalmente?

Mi único problema es hacer que se alineen de tres en tres y tengan el mismo espaciado. Aparentemente, los intervalos no pueden tener ancho y los divs (y los intervalos con display: block) no aparecen horizontalmente uno al lado del otro. Sugerencias

<div style='width:30%; text-align:center; float:left; clear:both;'> Es lo que tengo ahora.

Puede usar divs con el float: left;atributo que los hará aparecer horizontalmente uno al lado del otro, pero luego es posible que deba borrar los siguientes elementos para asegurarse de que no se superpongan.

Puedes usar

.floatybox {
     display: inline-block;
     width: 123px;
}

Si solo necesita admitir navegadores que admitan bloques en línea. Los bloques en línea pueden tener ancho, pero están en línea, como elementos de botón.

Ah, y es posible que desee agregar vertical-align: top en los elementos para asegurarse de que todo se alinee

Mi respuesta:

<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>

¿Por qué?

Técnicamente, un Span es un elemento en línea, sin embargo, puede tener ancho, solo necesita establecer su propiedad de visualización para bloquear primero. Sin embargo, en este contexto, un div es probablemente más apropiado, ya que supongo que querrás llenar estos divs con contenido.

Una cosa que definitivamente no desea hacer es clear:bothestablecer los divs. Configurarlo así significará que el navegador no permitirá que ningún elemento se siente en la misma línea que ellos. El resultado, sus elementos se acumularán.

Tenga en cuenta, el uso de display:inline. Se trata del error de duplicación de márgenes de ie6. Puede abordar esto de otras maneras si es necesario, por ejemplo, hojas de estilo condicionales.

Agregué un contenedor (# lo que sea) ya que supongo que estos no serán los únicos elementos en la página, por lo que es casi seguro que necesitará separarlos de los otros elementos de la página.

De todos modos, espero que sea de ayuda.

tu puedes hacer:

<div style="float: left;"></div>

o

<div style="display: inline;"></div>

Cualquiera de los dos hará que los divs se coloquen en mosaico horizontal.

Lo haría algo como esto, ya que le da 3 columnas de tamaño uniforme, espaciado uniforme y escalas (pares). Nota: Esto no se ha probado, por lo que es posible que deba modificarlo para navegadores más antiguos.

<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">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>

Yo usaría:

<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>

Es la primera vez que uso esta 'herramienta de código' de desbordamiento ... pero ya debería hacerlo ...

Lo que le gustaría hacer es buscar diseños basados ​​en cuadrículas CSS. Este método de diseño implica especificar algunas clases de CSS para alinear el contenido de la página con una estructura de cuadrícula. Está más relacionado con el diseño basado en impresión que con el basado en la web, pero es una técnica que se utiliza en muchos sitios web para diseñar el contenido en una estructura sin tener que recurrir a tablas.

Pruebe esto para empezar de Smashing Magazine.

Mire la propiedad css Float. http://w3schools.com/css/pr_class_float.asp

Funciona con elementos de bloque como div. Alternativamente, lo que está tratando de mostrar, las tablas no son malas si realmente está tratando de mostrar una tabla con cierta información.

Intentaría darles todos display: block;atributos y usos float: left;.

A continuación, puede configurar widthy / o heightcomo desee. Incluso puede especificar algunas reglas de alineación vertical.

    <!-- 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>

otro ... intente usar float: left;o right;, cambie el widthpor otros valores ... debería funcionar ... también tenga en cuenta que el 10% que no usa el div está entre ellos ... perdón por el mal inglés :)