Estoy desarrollando un generador de planes de lecciones de electrónica interactiva para maestros. Estoy probando que todo es JSbin antes de enviarlo a la página de WordPress de mi universidad.

Tengo un montón de imágenes con el atributo align = "left". Esto funciona perfectamente en JSbin pero en WordPress parecen descender diagonalmente. Esto se puede ver en la página RIT en vivo en el tercer cuadro (de 4). ¿Es este un error conocido en WordPress o estoy haciendo algo mal al copiar el código?

Bloqueo de código que me da problemas:

<p>Select Parts:</p>
<div id="bin3">
<img id="drag1" src="http://i.imgur.com/KliLtQ6.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag3" src="http://i.imgur.com/uGvqbbK.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag6" src="http://i.imgur.com/7Q6ym4O.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag8" src="http://i.imgur.com/dywyFeu.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag12" src="http://i.imgur.com/v76St3j.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag14" src="http://i.imgur.com/vO6a0ae.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag15" src="http://i.imgur.com/50c1YvW.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag16" src="http://i.imgur.com/BHn8uyJ.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="RED1" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="RED2" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="GREEN1" src="http://i.imgur.com/nFzIajN.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="GREEN2" src="http://i.imgur.com/nFzIajN.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="BLUE1" src="http://i.imgur.com/dYNAatC.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="BLUE2" src="http://i.imgur.com/dYNAatC.png" draggable="true" ondragstart="drag(event)" align="left">
<div id="RedLine"></div>
<div id="GreenLine"></div>
<div id="BlueLine"></div>
</div>

¡Gracias por toda ayuda en este proyecto!

0
Mark 12 jun. 2017 a las 07:40

2 respuestas

La mejor respuesta

Creo que las respuestas hasta ahora son buenas, pero también creo que debes darte cuenta de la raíz del problema. ¿Cuál es el comportamiento predeterminado en wordpress de inyectar etiquetas p y etiquetas br en su contenido en lugar de líneas vacías y después de imágenes y demás? Prefiero llamarlo una característica y no un error. Te guste o no.

Para el contenido normal de un blog no suele ser tan malo. Probablemente mejora la vida del usuario normal de WP que no sabe nada sobre HTML o algo así. Pero claro, es ciertamente molesto cuando no quieres esas etiquetas allí.

Puedes filtrar el contenido. Elimina las etiquetas p / br, pero esto cambia el comportamiento predeterminado de wordpress:

También hay complementos:

Personalmente, no soy fanático de agregar un complemento para cada pequeña cosa. Probablemente iría con una plantilla de página personalizada (su página se ve lo suficientemente personalizada) para que para esa página específica use un archivo html (php) separado:

Estoy seguro de que también hay otras soluciones.

1
ippi 12 jun. 2017 a las 05:36

Puede usar lo siguiente para alinear las imágenes:

#bin3 {
  height: 250px;
  padding: 10px;
  border: 2px solid black;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

Es posible que desee utilizar márgenes para poner algo de espacio entre ellos.

0
Gerard 12 jun. 2017 a las 05:09