0
180
ViewsDesplazamiento aleatorio de un div
Estoy creando un sitio web para mí y tiene una página de proyectos e hice un script js para agregar automáticamente cada uno de los proyectos usando un archivo json. Tengo 4 proyectos en el archivo json hasta ahora, pero uno de ellos está fallando.
En un círculo rojo está el div que está en mal estado. Aquí está el css para esos divs:
#img { vertical-align: top; display: inline-block; border-radius: 10px 10px 0px 0px; width: 340px; } #title { margin-top: 40px; vertical-align: top; font-weight: bold; font-size: 30px; float: left; margin-left: 5px; display: inline-block; } #desc { float: left; margin-left: 5px; display: inline-block; }Ahora aquí está el script js que los está agregando:
$.getJSON('https://raw.githubusercontent.com/Pinball3D/andysthings/main/registy.json', function(data){ console.log(data); var i = 0; console.log(data.length, i < data.length) while (i < data.length) { dat = data[i]; var a = document.createElement("a"); a.href=dat.url; var li = document.createElement("li"); li.id="item"; var img = document.createElement("img"); img.src=dat.img; img.id="img"; li.appendChild(img); var title = document.createElement("div"); title.id="title"; title.textContent=dat.name; li.appendChild(title); var desc = document.createElement("div"); desc.id="desc"; desc.textContent=dat.desc; li.appendChild(desc); a.appendChild(li); document.querySelector("#grid").appendChild(a); i++; } });No sé qué está causando que ese elemento esté fuera de lugar.
1 answers
Answer question0
La razón de esto es float: left; y display: inline-block; en el título y la descripción.
El propósito de float es hacer que el texto flote alrededor de un elemento si hay suficiente espacio (como una imagen o mayúsculas)
Según la imagen, no está claro por qué usa display: inline-block; y float en absoluto. Como parece que la descripción siempre debe estar debajo del título.
Así que elimine float: left y cambie inline-block a block tanto para el título como para la descripción.
Hoy en día, float solo debe usarse si realmente necesita dejar flotar el texto y el elemento y no para otros fines de diseño. Para los diseños en los que se usó float , debe usar flex o grid en su lugar.
Además, tener a hijo de ul no es válido. Y un li como hijo de a tampoco lo es.
$.getJSON('https://raw.githubusercontent.com/Pinball3D/andysthings/main/registy.json', function(data) { //console.log(data); var i = 0; //console.log(data.length, i < data.length) while (i < data.length) { dat = data[i]; var li = document.createElement("li"); li.id = "item"; var a = document.createElement("a"); a.href = dat.url; var img = document.createElement("img"); img.src = dat.img; img.id = "img"; a.appendChild(img); var title = document.createElement("div"); title.id = "title"; title.textContent = dat.name; a.appendChild(title); var desc = document.createElement("div"); desc.id = "desc"; desc.textContent = dat.desc; a.appendChild(desc); li.appendChild(a); document.querySelector("#grid").appendChild(li); i++; } }); body { font-family: sans-serif; } #img { vertical-align: top; display: inline-block; border-radius: 10px 10px 0px 0px; width: 340px; } #title { margin-top: 40px; font-weight: bold; font-size: 30px; margin-left: 5px; } #desc { margin-left: 5px; } #grid { display: flex; flex-flow: row wrap; justify-content: space-between; } #grid li { display: inline-block; border-radius: 5px; background-color: rgb(200,200,200); max-width: 340px; color: white; } #grid li a { display: block; color: inherit; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="grid"> </ul>