Fatal编程技术网
  • javascript/
  • Javascript 当多个div干扰其对齐时，如何对齐div

Javascript 当多个div干扰其对齐时，如何对齐div

javascript html css

Javascript 当多个div干扰其对齐时，如何对齐div,javascript,html,css,alignment,Javascript,Html,Css,Alignment,我一直在试着把几个分区排成一行。我有8个相邻的分区，但当我尝试对齐第二排时，我只能放入一个分区。我需要帮助 这是我的密码： <!DOCTYPE html> <html lang="en"> <body bgcolor="H70D4R334"> <title>Ordinate</title> <head> <style text/css> #div1{

我一直在试着把几个分区排成一行。我有8个相邻的分区，但当我尝试对齐第二排时，我只能放入一个分区。我需要帮助

这是我的密码：

<!DOCTYPE html>
    <html lang="en">
    <body bgcolor="H70D4R334">
    <title>Ordinate</title>
    <head>
        <style text/css> 

    #div1{
        float:left;
        width:50px;
        height:50px;
        margin-top:50px;
        margin-right:500px;
        margin-left:400px;
        border:0px solid blue;
    }
    #div2{
        float:left;
        width:50px;
        height:50px;
        margin-top:50px;
        margin-right:50px;
        border:0px solid blue;
    }
    #div3{
        float:left;
        width:50px;
        height:50px;
        margin-top:300px;
        margin-right:5px;
        border:0px solid green;
    }
    #div4{
        float:left;
        width:50px;
        height:50px;
        margin-top:300px;
        margin-left:5px;
        border:0px solid green;
    }
    #div5{
        float:left;
        width:50px;
        height:50px;
        margin-top:300px;
        margin-left:5px;
        border:0px solid green;
    }
    #div6{
        float:left;
        width:50px;
        height:50px;
        margin-top:300px;
        margin-left:5px;
        border:0px solid green;
    }
    #div7{
        float:left;
        width:50px;
        height:50px;
        margin-top:300px;
        margin-left:5px;
        border:0px solid green;
    }
    #div8{
        float:left;
        width:50px;
        height:50px;
        margin-top:300px;
        margin-left:5px;
        border:0px solid green;
    }
    #div10{
        float:left;
        width:50px;
        height:50px;
        margin-top:100px;
        margin-left:400px;
        border:1px solid green;
    }
    #div11{
        float:left;
        width:50px;
        height:50px;
        margin-top:100px;
        margin-left:5px;
        border:1px solid green;
    }
    #div12{
        float:left;
        width:50px;
        height:50px;
        margin-top:100px;
        margin-left:5px;
        border:1px solid green;
    }
    #div13{
        float:left;
        width:50px;
        height:50px;
        margin-top:100px;
        margin-left:5px;
        border:1px solid green;        
    }
    #div14{
        float:left;
        width:50px;
        height:50px;
        margin-top:100px;
        margin-left:5px;
        border:1px solid green;
    }
    #div15{
        float:left;
        width:50px;
        height:50px;
        margin-top:100px;
        margin-left:5px;
        border:1px solid green;
    }
    #div16{
        float:left;
        width:50px;
        height:50px;
        margin-top:100px;
        margin-left:5px;
        border:1px solid green;
    }
    #div17{
        float:left;
        width:50px;
        height:50px;
        margin-top:100px;
        margin-left:5px;
        border:1px solid green;
    }
    #Button{
        float:center;
        width:200px;
        height:50px;
        margin:25px;
    }

    </style>



    <script>
    var dragSrcEl = null;
    var draggSrcID = null;

        function dragStart(ev) {
        draggSrcID = ev.target.id;
        dragSrcEl = ev.target;
        ev.dataTransfer.effectAllowed = 'move';
        ev.dataTransfer.setData('text/html', ev.target.outerHTML);
        }

        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drop(ev) {
            ev.target.appendChild(document.getElementById(draggSrcID));
            ev.preventDefault();
        } 

        function swapDrop(ev) {

          if (ev.stopPropagation) {
            ev.stopPropagation(); // Stops some browsers from redirecting.
          }

          // Don't do anything if dropping the same image we're dragging.
          if (dragSrcEl != ev.target) {
            // Set the source image to the HTML of the image we're dropping on.
            srcEl = document.getElementById(draggSrcID);
            srcEl.outerHTML = ev.target.outerHTML;
            ev.target.outerHTML = ev.dataTransfer.getData('text/html');
           }
            ev.preventDefault();
        }       

    </script>   
    </head>
    <body>
    <center><font size="10">Ordinate</font></center>
        <div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"> 
        </div>
        <div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"> 
        </div>
        <div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"> 
        </div>
        <div id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"> 
        </div>
        <div id="div14" ondrop="drop(event)" ondragover="allowDrop(event)"> 
        </div>
        <div id="div15" ondrop="drop(event)" ondragover="allowDrop(event)"> 
        </div>
        <div id="div16" ondrop="drop(event)" ondragover="allowDrop(event)"> 
        </div>
        <div id="div17" ondrop="drop(event)" ondragover="allowDrop(event)">
        </div> 
        <div id="div1" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
        <img id="D" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=D&w=50&h=50" draggable="true" ondragstart="dragStart(event)" />
        </div>
        <div id="div2" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
        <img id="E" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=E&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
        </div>
        <div id="div3" ondrop="swapDrop(event)" ondragover="allowDrop(event)">
        <img id="I" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=I&w=50&h=50" draggable="true" ondragstart="dragStart(event)">  
        </div>
        <div id="div4" ondrop="swapDrop(event)" ondragover="allowDrop(event)"> 
        <img id="T" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=T&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
        </div>
        <div id="div5" ondrop="swapDrop(event)" ondragover="allowDrop(event)"> 
        <img id="A" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=A&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
        </div>
        <div id="div6" ondrop="swapDrop(event)" ondragover="allowDrop(event)"> 
        <img id="N" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=N&w=50&h=50" draggable="true" ondragstart="dragStart(event)">  
        </div>
        <div id="div7" ondrop="swapDrop(event)" ondragover="allowDrop(event)"> 
        <img id="O" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=O&w=50&h=50" draggable="true" ondragstart="dragStart(event)">
        </div>
        <div id="div8" ondrop="swapDrop(event)" ondragover="allowDrop(event)"> 
        <img id="R" src="https://placeholdit.imgix.net/~text?txtsize=20&txt=R&w=50&h=50" draggable="true" ondragstart="dragStart(event)">  
        </div>
        <center><input id="Button" type="submit" value="Click me to check" onclick="HitEnter()"></center>
        <script>
            word = "ordinate"
            function HitEnter() {
                for (i = 10, str = ""; i <= 17; i++) {
                    if (document.getElementById("div" + i).childNodes.length > 1) {
                        str += document.getElementById("div" + i).childNodes[1].id
                    }
                }
                if (str.toLowerCase() == word) {
                    alert("Good job!!!")
                }
                else {
                alert('You got the word incorrect! Please try again.')

                }
            }
        </script>
    </body>
    </html>


坐标
#第一组{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：50px；
右边距：500px；
左边距：400px；
边框：0px纯蓝色；
}
#第二组{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：50px；
右边距：50px；
边框：0px纯蓝色；
}
#第三组{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：300px；
右边距：5px；
边框：0px纯绿色；
}
#第四组{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：300px；
左边距：5px；
边框：0px纯绿色；
}
#第五组{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：300px；
左边距：5px；
边框：0px纯绿色；
}
#第六组{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：300px；
左边距：5px；
边框：0px纯绿色；
}
#第7课{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：300px；
左边距：5px；
边框：0px纯绿色；
}
#第8课{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：300px；
左边距：5px；
边框：0px纯绿色；
}
#第10课{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：100px；
左边距：400px；
边框：1px纯绿色；
}
#第11课{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：100px；
左边距：5px；
边框：1px纯绿色；
}
#第12课{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：100px；
左边距：5px；
边框：1px纯绿色；
}
#第13课{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：100px；
左边距：5px；
边框：1px纯绿色；
}
#第14课{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：100px；
左边距：5px；
边框：1px纯绿色；
}
#第15课{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：100px；
左边距：5px；
边框：1px纯绿色；
}
#第16课{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：100px；
左边距：5px；
边框：1px纯绿色；
}
#第17课{
浮动：左；
宽度：50px；
高度：50px；
边缘顶部：100px；
左边距：5px；
边框：1px纯绿色；
}
#钮扣{
浮动：中心；
宽度：200px；
高度：50px；
利润率：25px；
}
var dragSrcEl=null；
var draggSrcID=null；
功能dragStart（ev）{
draggSrcID=ev.target.id；
dragSrcEl=电动汽车目标；
ev.dataTransfer.effectAllowed='move'；
setData（'text/html'，ev.target.outerHTML）；
}
功能allowDrop（ev）{
ev.preventDefault（）；
}
功能下降（ev）{
appendChild（document.getElementById（draggSrcID））；
ev.preventDefault（）；
} 
功能swapDrop（ev）{
如果（电动停止行走）{
ev.stopPropagation（）；//停止某些浏览器重定向。
}
//如果删除我们正在拖动的相同图像，请不要执行任何操作。
如果（dragSrcEl！=电动目标）{
//将源图像设置为我们正在放置的图像的HTML。
srcEl=document.getElementById（draggSrcID）；
srcEl.outerHTML=ev.target.outerHTML；
ev.target.outerHTML=ev.dataTransfer.getData（'text/html'）；
}
ev.preventDefault（）；
}       
坐标
word=“坐标”
函数hitter（）{
对于（i=10，str=“”；i 1）{
str+=document.getElementById（“div”+i）.childNodes[1].id
}
}
if（str.toLowerCase（）==word）{
警惕（“干得好！！！”）
}
否则{
警报（'您的单词不正确！请重试'）
}
}
我是css、js和html的初学者。我会感激任何能得到的帮助。谢谢大家!

您已经为id为1的div设置了以下属性

margin-right: 500px;
margin-left: 400px;
因此，它位于距离左边界400像素的位置。因为您还设置了右边距，所以右边的下一个元素设置为500px。这就是为什么你们的争吵会破裂

编辑：

如何修复：删除所有

margin-right
从第二行开始，添加

margin-left: 5px
将其与另一行相同

这是什么意思<代码>？抱歉，我没有编辑它。您不需要分别为每个和evry div设置样式。只需为div添加一次样式或添加一个class@FrankProvost，当我尝试这样做时，div之间的间隔比我希望的要大。如何在不这样做的情况下将div 1直接对齐到div 10下方？当我尝试这样做时，它无法正确对齐。如果你能直接编辑代码，那将是一个很大的帮助