堆栈内存溢出
  简体   繁体   English

当多个div干扰其对齐方式时如何对齐div

[英]how to align divs when multiple divs are disturbing its alignment

 原文  2016-01-15 13:54:26  3   1    javascript/ html/ css/ alignment

问题描述

I have been trying to line up several divs in a row. 我一直在尝试连续排好几个div。 I have 8 divs next to each other, but when I try to allign the 2nd row, I can only fit one div in. I need help 我彼此相邻有8个div，但是当我尝试分配第二行时，我只能容纳一个div。我需要帮助

Here is my code: 这是我的代码： 

<!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>

I am a beginner at css, js, and html. 我是CSS，js和html的初学者。 I will appreciate any help I can get. 我将不胜感激。 Thank You! 谢谢！

1 个解决方案

解决方案1
 1 已采纳  2016-01-15 14:18:56

You have set following attributes for you div with the id 1 您已为ID为1的div设置了以下属性 

margin-right: 500px;
margin-left: 400px;

therefore it's positioned 400 px away from left border. 因此它的位置距左边框400像素。 Since you also have margin right set, the next element to it's right is set 500px away. 由于您还设置了边距权利，因此其右边的下一个元素距像素500px。 This is why your rows break. 这就是为什么您的行中断。

Edit: 编辑：

how to fix it: Remove all 修复方法：全部删除 

margin-right

from your second row and add 从第二行添加 

margin-left: 5px

to have it the same as the other row 与另一行相同

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何居中div并保持对齐嵌套浮动div？ - How to center a div and keep the alignment to its nested floating divs? 如何水平对齐div？ - How to align divs horizontally? 如何在DOM中对齐div - How to align divs in a DOM 对齐使用 javascript 创建的多个 div - Align multiple divs created with javascript 如何以水平格式对齐div？ - how to align divs in a horizontal format? 多个div重叠时如何组织事件 - how to organize events when multiple divs overlap 如何使用Bootstrap修复div对齐 - How to fix divs alignment using Bootstrap 如何包装多个div - How to wrap multiple divs 如何基于百分比对齐中心或底部的内部div - How to align inner divs in centre or bottom based on % 如何将这些div在中心水平对齐？ - How can I horizontally align these divs in the centre?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM