He estado experimentando con párrafos y escribiéndoles desde la etiqueta del script y me preguntaba si hay una manera de colocarlos uno al lado del otro horizontalmente en lugar de debajo. Mi código actual es así:

<p id="csvData"></p>
<p id="csvData2"></p> 

No puedo entender cómo hacer que "csvData" y "csvData2" vayan uno al lado del otro.

0
LegitBritish 13 ene. 2017 a las 23:18

7 respuestas

La mejor respuesta

No es una cuestión de script, esto se haría fácilmente a través de CSS.

#csvData {
  border: 1px solid red;
  height: 200px;
  float: left;
  width: 45%;
}
#csvData2 {
  border: 1px dotted blue;
  height: 400px;
  float: right;
  width: 45%;
}
<p id="csvData"></p>
<p id="csvData2"></p> 
3
Snowmonkey 13 ene. 2017 a las 20:21

En realidad, dado que parece querer mostrar los datos de la tabla, ¿por qué no convertirla en una tabla?

table {
  width: 100%; /* not necessary if 100%, but can be set narrower here */
  }
<table>
  <tr>
    <td>
      <p id="csvData">One</p>
    </td>
    <td>
      <p id="csvData2">Two</p>
    </td>
  </tr>
</table>
1
Johannes 13 ene. 2017 a las 20:52

Los elementos p y div son elementos de nivel de bloque donde span es un elemento en línea.

Puede envolver cada <p> en un <div> o usar <span>

0
MannfromReno 13 ene. 2017 a las 20:21

Use CSS para cambiar su "comportamiento" predeterminado:

p {
    display: inline;
}

O

p {
    display: inline-block;
}

Leer aquí: Pantalla CSS: bloque en línea vs bloque en línea

1
Community 23 may. 2017 a las 12:09

Use display: inline;, display: inline-block; o float: left;

p {
  display: inline-block;
  }
<p id="csvData">1</p>
<p id="csvData2">2</p> 
1
Michael Coker 13 ene. 2017 a las 20:21

Hay varias respuestas posibles, según lo que quiera decir con "al lado de".

<p id="csvData"></p>
<p id="csvData2"></p>

Si la longitud del párrafo no es un problema, la primera pregunta podría ser realmente "¿Por qué necesita etiquetas <p>?" Comprender la diferencia entre las etiquetas de bloque y las etiquetas en línea es fundamental en HTML. Menciono esto porque indica que es nuevo en HTML. Puede encontrar lo que necesita simplemente usando <span> o alguna otra etiqueta. Consulte la documentación de Mozilla Developer Network para obtener explicaciones sobre block y elementos en línea.

En mi opinión, es preferible utilizar un elemento diferente, como <span> a largo plazo, para modificar las etiquetas <p> del tipo de bloque, en mi opinión.

<!-- Alternative, with spans instead -->
<span id="csvData"></span>
<span id="csvData2"></span>

O, si debe hacerlo, puede usar CSS

#csvData, #csvData2 {
   display: inline; /* or, inline-block */
}

@Moose proporcionó un buen enlace en una respuesta diferente a una pregunta que explica la diferencia entre bloque, en línea y bloque en línea. Vale la pena leer.

Si quiere los párrafos en un diseño de dos columnas, esa pregunta tiene muchas soluciones aquí en StackOverflow. por ejemplo, aquí, aquí y aquí.

Otra posible solución son los flotadores. Los flotadores se aplican a través de CSS y hacen que los elementos se apilen a la izquierda (o derecha, según la declaración) con anchuras mínimas. Hay varias complicaciones con las carrozas. Float cambia el ancho predeterminado de los elementos y puede causar otras complicaciones relacionadas con la altura / anchura del objeto. (Por ejemplo, un párrafo sin estilo toma tanto ancho como puede naturalmente, pero un párrafo flotante tiene un ancho más pequeño). Por lo general, cuando usa flotantes, querrá especificar manualmente un ancho y deberá "borrar" Las carrozas más tarde. Aquí hay muchos recursos buenos en flotadores, incluidos aquí y aquí.

/* CSS */
#csvData, #csvData2 {
   border: 1px dotted blue; /* To show the paragraphs */
   float: left;
   width: 100px;
}
1
Community 23 may. 2017 a las 11:46

Por favor, intente lo siguiente:

<p id="csvData" style="display: inline-block; width: 50%;"></p>
<p id="csvData2" style="display: inline-block; width: 50%;"></p> 

Además, puede agregar una entrada CSS como:

p#csvData, p#csvData2 {
    display: inline-block;
    width: 50%;
}

Espero que esto ayude .. saludos

0
Adrian Bratu 13 ene. 2017 a las 20:23