【发布时间】：2016-04-21 03:21:27
【问题描述】：
我一直在尝试连续排列几个 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 的初学者。我会很感激我能得到的任何帮助。谢谢！
【问题讨论】：
-
这是什么意思？
<style text/.css>? -
对不起，我没有编辑。
-
您不需要单独设置每个和每个 div 的样式。只需为 div 添加一次样式或添加一个类
-
@FrankProvost，当我尝试这样做时，div 之间的距离超出了我的预期。
标签： javascript html css alignment