Quiero decir, las dos etiquetas tienen la misma altura.¿Cómo hacer dos <div>...</div> en la misma fila?
5
A
Respuesta
10
Pruebe esto para todos los divs.
display:inline-block;
2
flotar con CSS:
float: left
1
Hacer flotar:
HTML
<div class="container1"></div>
<div class="container2"></div>
<div class="clear"></div>
CSS
.clear { clear: both; }
.container1, .container2 { float: left; }
Usted tiene que despejar el flotador .. a fin de utilizar borrar ambos :)
9
Simple: use <span>
s en su lugar.
<div>
por defecto tienen display: block
, lo que significa que el siguiente elemento estará en una nueva línea.
Puede cambiarlos a display: inline
para obtener el comportamiento que desea. Pero recuerde que un <div>
en línea es solo un <span>
.
1
El flotador estropea la alineación central de mi página. Esto es lo que obtuve, quiero obtener 2 y 3 en la misma fila sin perder el centrado de la página. Float no funciona porque cuando cambio el tamaño del navegador, se mueve con él.
<head>
<meta http-equiv="Content-Language" content="en-us">
<style type="text/css">
.div1 {
background: #faa;
width: 500;
}
.div2 {
background: #ffc;
width: 400;
margin-right: 100px;
}
.div3 {
background: #cfc;
width: 100;
margin-left: 400px;
}
</style>
</head>
<html>
<body>
<center>
<div class="div1"> This is no 1</div>
<div class="div2"> This is no 2</div>
<div class="div3"> This is no 3</div>
</center>
</body>
</html>
2
Utilice un contenedor div y coloque dentro de todos sus divs.
.div_container{
display: flex;
flex-direction: row;
}
Eso fácil!
Cuestiones relacionadas
- 1. Como hacer <span> la misma altura que <input type = "text">
- 2. ¿Qué significa << hacer en Python?
- 3. ¿Cómo hacer comparación de valores entre dos Dictionary <string, lista <string>> objetos
- 4. Diferencia en dos valores de fila de la misma tabla
- 5. ¿Qué hace "<%:" hacer?
- 6. ¿Cómo hacer IEnumerable <T> readonly?
- 7. ¿Cómo funciona <: <?
- 8. ¿Cómo funciona exactamente la implementación de Scala de <: <, <% <, =: = en el compilador?
- 9. Quiero todas las columnas (<td></td>) en un <table></table> tienen la misma longitud, ¿cómo lograr esto?
- 10. Hacer SQL Seleccionar la misma fila varias veces
- 11. Ant (1.6.5) - Cómo establecer dos propiedades en una <condition> o <if>
- 12. ¿Pueden dos o más hilos iterar sobre la misma lista <t> sin ningún problema?
- 13. EJS: <% = versus <% -
- 14. ¿Cómo insertar texto "<<" en TextView?
- 15. En PHP, ¿qué representa "<<<"?
- 16. Hacer un <br> en lugar de <div></div> pulsando Enter en un contenteditable
- 17. ¿Qué significa $: << "." hacer a Ruby requiere ruta?
- 18. Cómo evitar << - usando assign
- 19. ¿Cómo se puede obligar a que dos elementos de permanecer siempre en la misma línea en un <td>
- 20. ¿Cómo se << difiere de +?
- 21. Constante en clase << autobloque
- 22. Cómo utilizar <h: selectBooleanCheckbox> en <h:dataTable> o <ui:repeat> para seleccionar varios elementos?
- 23. Cómo comprobar si dos expresiones <Func <T, bool>> son las mismas
- 24. Intercambiar dos elementos en la lista <T>
- 25. <: <operador en scala
- 26. Cómo deserializar Enumerable.ToList <>() a la lista <>
- 27. ¿Cómo verifico dos condiciones en una <c:if>?
- 28. Fusionando dos Colección <T>
- 29. cout << stringstream
- 30. <% $, <% @, <% =, <% # ... ¿cuál es el problema?
+1 pantalla: ¡en línea no es lo suficientemente flexible y las carrozas están desordenadas! –