英文:
float-left not working for a series of divs
问题
I have the following Javascript code:
for(var i = 0; i < 8; i++){
var x = document.createElement('div');
x.setAttribute('class','rowone');
x.setAttribute('id',i);
var move = 4;
x.style.marginLeft = move + "%";
x.addEventListener('click',clickdata,'false');
// creating each div block
var p = document.createElement('IMG');
p.style.width = "80%";
p.style.height="100%";
p.src = orderone[i];
x.appendChild(p);
// creating the text in block, mostly for test
document.body.append(x);
// appending x into the document
} // creating first row and adding event listener
for(var j = 0; j < 8; j++){
var x = document.createElement('div');
x.setAttribute('class','rowtwo');
x.setAttribute('id',j+8);
var moverow = 4;
x.style.marginLeft = moverow + "%";
x.addEventListener('click',secondclick, 'false');
// creating each div block
var otherp = document.createElement('IMG');
otherp.style.width = "80%";
otherp.style.height="100%";
otherp.src = ordertwo[j];
x.appendChild(otherp);
// creating the text in block, mostly for test
document.body.append(x);
// appending x into the document
}
(orderone和ordertwo只是图像数组)
它的作用是创建两行div，所有div都有一个图像（来自orderone或ordertwo）。这是它应该看起来的样子：
然而，行经常会随机分开（有时候它会正常工作，其他时候它只会给出其他排列，如下所示）：
你应该怎么做？
英文:
I have the following Javascript code:
{
var x = document.createElement('div');
x.setAttribute('class','rowone');
x.setAttribute('id',i);
var move = 4;
x.style.marginLeft = move + "%";
x.addEventListener('click',clickdata,'false');
} // creating each div block
{
var p = document.createElement('IMG');
p.style.width = "80%";
p.style.height="100%";
p.src = orderone[i];
x.appendChild(p);
} // creating the text in block, mostly for test
document.body.append(x); // appending x into the document
} // creating first row and adding event listener
for(var j = 0; j < 8; j++){
{
var x = document.createElement('div'); x.setAttribute('class','rowtwo');
x.setAttribute('id',j+8);
var moverow = 4;
x.style.marginLeft = moverow + "%";
x.addEventListener('click',secondclick, 'false');
} // creating each div block
{
/*var p = document.createElement('p');
p.innerHTML = ordertwo[j];*/
var otherp = document.createElement('IMG');
otherp.style.width = "80%";
otherp.style.height="100%";
otherp.src = ordertwo[j];
x.appendChild(otherp);
} // creating the text in block, mostly for test
document.body.append(x); // appending x into the document
}
(orderone and ordertwo are just the arrays of images)
What it does is that it creates two rows of divs, all divs having an image (from orderone or ordertwo). This is what it should look like:
However, the rows often just break up randomly (sometimes it works right, other times it just gives some other assortment, like below):
What do I do?
答案1
得分: 0
将所有的 div 容器设置为相同的高度，并且像这样隐藏溢出内容：
.myDivs {
height: 200px;
overflow: hidden;
}
将高度更改为与您的图像大部分或最高图像的高度相匹配。任何比您的高度更高的内容将被隐藏。
英文:
Set all the div containers to the same height and overflow to hidden like this:
.myDivs {
height: 200px;
overflow: hidden;
}
Change the height to match the bulk of your images or the height of the tallest image. Anything that is taller than your height will be hidden
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论