當多個div干擾其對齊方式時如何對齊div
[英]how to align divs when multiple divs are disturbing its alignment
問題描述
我一直在嘗試連續排好幾個div。 我彼此相鄰有8個div，但是當我嘗試分配第二行時，我只能容納一個div。我需要幫助
這是我的代碼：
<!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>
我是CSS，js和html的初學者。 我將不勝感激。 謝謝！
1 個解決方案
解決方案1
1 已采納 2016-01-15 14:18:56
您已為ID為1的div設置了以下屬性
margin-right: 500px;
margin-left: 400px;
因此它的位置距左邊框400像素。 由於您還設置了邊距權利，因此其右邊的下一個元素距像素500px。 這就是為什么您的行中斷。
編輯：
修復方法：全部刪除
margin-right
從第二行添加
margin-left: 5px
與另一行相同
如何居中div並保持對齊嵌套浮動div？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.