css - horizontalmente - como alinear 3 imagenes en html

¿Cómo alineo los tramos o divs horizontalmente?

Question

Mi único problema es hacer que se alineen tres cruzados y tengan el mismo espacio. Aparentemente, los tramos no pueden tener ancho y divs (y los tramos con display: bloque) no aparecen horizontalmente uno al lado del otro. Sugerencias?

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

Answer 1

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 primero su propiedad de visualización para bloquear. Sin embargo, en este contexto, un div es probablemente más apropiado, ya que supongo que quieres llenar estos divs con contenido.

Una cosa que definitivamente no quieres hacer es tener clear:both establecidos en los divs. Configurarlo así significará que el navegador no permitirá que ningún elemento se sitúe en la misma línea que ellos. El resultado, tus elementos se acumularán.

Tenga en cuenta, el uso de la display:inline . Esto trata del error ie6 de duplicación de margen. Podría abordar esto de otras maneras si es necesario, por ejemplo, hojas de estilo condicionales.

He agregado un contenedor (# lo que sea) ya que supongo que estos no serán los únicos elementos en la página, por lo que seguramente tendrá que segregarlos de los otros elementos de la página.

De todos modos, espero que sea útil.

Answer 2

Haría algo como esto ya que te da 3 columnas de tamaño uniforme, incluso espaciado e (incluso) escalas. Nota: Esto no se ha probado, por lo que podría necesitar ajustes 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>

Answer 3

Lo que le gustaría hacer es buscar diseños basados ​​en la cuadrícula CSS. Este método de diseño implica especificar algunas clases de CSS para alinear los contenidos de la página a una estructura de grilla. Está más relacionado con el diseño impreso que con la web, pero es una técnica utilizada en muchos sitios web para distribuir el contenido en una estructura sin tener que recurrir a tablas.

Prueba esto para starters desde la revista Smashing.

Answer 4

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

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

Answer 5

Puedes usar

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

Si solo necesita admitir navegadores compatibles con 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 quizás quieras agregar vertical-align: top en los elementos para asegurarte de que las cosas se alineen

Answer 6

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

Answer 7

Yo trataría de darles a todos display: block; atributo y uso de float: left; .

A continuación, puede establecer el width y / o height que desee. Incluso puede especificar algunas reglas de alineación vertical.

Answer 8

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 utilizo esta ''herramienta de código'' de desbordamiento ... pero debería hacerlo ahora ...

Answer 9

tu puedes hacer:

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

o

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

Cualquiera de los dos hará que los divs se inclinen horizontalmente.

Answer 10

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

otra ... intenta usar float: left; o right; , cambie el width de otros valores ... debería funcionar ... también tenga en cuenta que el 10% que no son utilizados por el div es entre ellos ... lo siento por el mal inglés :)