Respuestas:
Eso es algo más entonces:
div.inline { float:left; }
.clearBoth { clear:both; }<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->Un div en línea es un fenómeno de la red y debe ser golpeado hasta que se convierta en un lapso (al menos 9 de cada 10) ...
<span>foo</span>
<span>bar</span>
<span>baz</span>... responde la pregunta original ...
Intenta escribirlo así:
div { border: 1px solid #CCC; } <div style="display: inline">a</div>
<div style="display: inline">b</div>
<div style="display: inline">c</div>Después de leer esta pregunta y las respuestas un par de veces, todo lo que puedo hacer es suponer que ha habido un poco de edición en curso, y sospecho que se le ha dado una respuesta incorrecta por no proporcionar suficiente información. Mi pista proviene del uso de la bretiqueta.
Disculpas a Darryl. Leí class = "inline" como style = "display: inline". Tiene la respuesta correcta, incluso si usa nombres de clase semánticamente cuestionables ;-)
El uso erróneo de brproporcionar un diseño estructural en lugar de un diseño textual es demasiado frecuente para mi gusto.
Si desea poner más elementos en línea dentro de ellos, divsentonces debería flotar esos divs en lugar de hacerlos en línea.
Divs flotantes:
===== ======= == **** ***** ****** +++++ ++++
===== ==== ===== ******** ***** ** ++ +++++++
=== ======== === ******* **** ****
===== ==== ===== +++++++ ++
====== == ======Divs en línea:
====== ==== ===== ===== == ==== *** ******* ***** *****
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++Si buscas lo primero, entonces esta es tu solución y pierdes esas bretiquetas:
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
<p>block level content or <span>inline content</span>.</p>
<p>block level content or <span>inline content</span>.</p>
</div>tenga en cuenta que el ancho de estos divs es fluido, así que siéntase libre de ponerles anchos si desea controlar el comportamiento.
Gracias Steve
Usar display:inline-blockcon una consulta de margen y medios para IE6 / 7:
<html>
<head>
<style>
div { display:inline-block; }
/* IE6-7 */
@media,
{
div { display: inline; margin-right:10px; }
}
</style>
</head>
<div>foo</div>
<div>bar</div>
<div>baz</div>
</html>Debe usar en
<span>lugar de<div>para la forma correcta de en línea . porque div es un elemento de nivel de bloque, y su requisito es para elementos de nivel de bloque en línea.
Aquí hay un código html según sus requisitos:
<div class="main-div">
<div>foo</div>
<div>bar</div>
<div>baz</div>`
</div>display:inline-block;float:left;así que tienes que cambiar la propiedad de visualización con display:inline-block;fuerza
Ejemplo uno
div {
display: inline-block;
}Ejemplo dos
div {
float: left;
}necesitas limpiar el flotador
.main-div:after {
content: "";
clear: both;
display: table;
}Como se mencionó, display: inline es probablemente lo que quieres. Algunos navegadores también admiten bloques en línea.
Simplemente use un contenedor wrap div con "float: left" y ponga cajas dentro que también contengan float: left:
CSS:
wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}
.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}HTML:
<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>Usaría tramos o flotaría el div a la izquierda. El único problema con la flotación es que debe borrar la flotación después o el div que contiene debe tener el estilo de desbordamiento configurado en auto
Sé que la gente dice que esta es una idea terrible, pero en la práctica puede ser útil si quieres hacer algo como imágenes en mosaico con comentarios debajo de ellas. por ejemplo, Picasaweb lo usa para mostrar las miniaturas en un álbum.
Consulte, por ejemplo, / demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html (clase goog-inline-block; lo abrevio a ib aquí)
/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }Dado ese CSS, configure su div en clase ib, y ahora es mágicamente un elemento de bloque en línea.
Necesitas contener los tres divs. Aquí hay un ejemplo:
CSS
div.contain
{
margin:3%;
border: none;
height: auto;
width: auto;
float: left;
}
div.contain div
{
display:inline;
width:200px;
height:300px;
padding: 15px;
margin: auto;
border:1px solid red;
background-color:#fffff7;
-moz-border-radius:25px; /* Firefox */
border-radius:25px;
}Nota: los atributos border-radius son opcionales y solo funcionan en navegadores compatibles con CSS3.
HTML
<div class="contain">
<div>Foo</div>
</div>
<div class="contain">
<div>Bar</div>
</div>
<div class="contain">
<div>Baz</div>
</div>Tenga en cuenta que los divs 'foo' 'bar' y 'baz' se mantienen dentro del div 'contiene'.
<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>Creo que puedes usarlo de esta manera sin usar ningún CSS -
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<tr>
<td>baz</td>
</tr>
</table>En este momento está utilizando el elemento de nivel de bloque de esa manera está obteniendo resultados no deseados. Entonces, ¿puede alinear elementos como span, small, etc.
<span>foo</span><span>bar</span><span>baz</span><div class="cdiv">
<div class="inline"><p>para 1</p></div>
<div class="inline">
<p>para 1</p>
<span>para 2</span>
<h1>para 3</h1>
</div>
<div class="inline"><p>para 1</p></div><div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
#div01, #div02, #div03 {
float:left;
width:2%;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
//solution 2
<style>
#div01, #div02, #div03 {
display:inline;
padding-left:5px;
}
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>
/* I think this would help but if you have any other thoughts just let me knw kk */