div类的对齐中断

问题描述 投票：0回答：2

我有css的class div类框及其响应，

我的问题是，当我将div类box002拖放到类框时，它从对齐上升，

如何在css中正确控制其对齐方式

什么是最好的方法？

什么是变化我必须使它保持在最正确的行，如果甚至box002被删除类盒内的数字被删除

var tempimages = [];

function rvalue() {
  const
    items = [{
        label: '1',
        url: 'https://via.placeholder.com/75x75?text=1'
      },
      {
        label: '2',
        url: 'https://via.placeholder.com/75x75?text=2'
      },
      {
        label: '3',
        url: 'https://via.placeholder.com/75x75?text=3'
      },
      {
        label: '4',
        url: 'https://via.placeholder.com/75x75?text=4'
      },
      {
        label: '5',
        url: 'https://via.placeholder.com/75x75?text=5'
      },
      {
        label: '6',
        url: 'https://via.placeholder.com/75x75?text=6'
      },
      {
        label: '7',
        url: 'https://via.placeholder.com/75x75?text=7'
      },
      {
        label: '8',
        url: 'https://via.placeholder.com/75x75?text=8'
      },
      {
        label: '9',
        url: 'https://via.placeholder.com/75x75?text=9'
      },
      {
        label: '10',
        url: 'https://via.placeholder.com/75x75?text=10'
      }
    ],
    ptags = document.querySelectorAll('[name="values"]');



  var lastnumber = 0;
  for (let index = 0; index < 3; index++) {
    randomIndex = Math.floor(Math.random() * items.length),
      // const randItem2 = Array.from({ length: 3 },() => {const randomIndex = Math.floor(Math.random() * items.length);const [item] =                                                        items.splice(randomIndex, 1);return item;

      item = items[randomIndex];
    ptags[index].textContent = item.label;
    tempimages.push(item);


  }

}


function displayAllImages() {

  if (tempimages.length === 0) {
    return;
  }


  item = tempimages.shift(),

    image = document.getElementById('slide');

  image.src = item.url;
};

$(function() {

  rvalue();
  displayAllImages();
});

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

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();

  var data = ev.dataTransfer.getData("Text");
  var el = document.getElementById(data);

  el.parentNode.removeChild;

  ev.currentTarget.style.backgroundColor = 'initial';

  var pParagraph = ev.currentTarget.firstElementChild;
  ev.currentTarget.removeChild(pParagraph);

  // Show the next image in the slider..
  displayAllImages();
}
#container {
  margin-top: -2%;
  white-space: nowrap;
  text-align: center;
  margin-left: 20%;
  margin-right: 30%;
}

.box {
  background-color: coral;
  width: 60px;
  height: 60px;
  margin-top: 10px;
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border-color: #e6e600;
  border-radius: 10%;
  background-color: #ff00ff;
}

.box002 {
  float: left;
  width: 50px;
  height: 50px;
  float: left;
  margin-left: 30%;
  margin-top: -20px;
  padding-top: 2%;
  background-color: #ffff00 2px;
  border: 2px solid #000066;
}

.text {
  padding: 20px;
  margin: 7 px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
}

#container {
  white-space: nowrap;
  text-align: center;
  margin-left: 20%;
  margin-right: 30%;
}

.text {
  padding: 20px;
  margin: 7 px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body onload="rvalue()">

  <div class="containerr">

    <div id="container" style="margin-bottom:10%">

      <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
        <p name="values"></p>
      </div>

      <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
        <p name="values"></p>
      </div>

      <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
        <p name="values"></p>
      </div>

    </div>
  </div>




  <div class="box002" draggable="true" ondragstart="drag(event)" id="2">

    <img src="" draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded" />

  </div>
</body>
html css
2个回答
0
投票

var tempimages = [];

function rvalue() {
  const
    items = [  
      { label: '1', url: 'https://via.placeholder.com/75x75?text=1'  },
      { label: '2', url: 'https://via.placeholder.com/75x75?text=2'  },
      { label: '3', url: 'https://via.placeholder.com/75x75?text=3'  },
      { label: '4', url: 'https://via.placeholder.com/75x75?text=4'  },
      { label: '5', url: 'https://via.placeholder.com/75x75?text=5'  },
      { label: '6', url: 'https://via.placeholder.com/75x75?text=6'  },
      { label: '7', url: 'https://via.placeholder.com/75x75?text=7'  },
      { label: '8', url: 'https://via.placeholder.com/75x75?text=8'  },
      { label: '9', url: 'https://via.placeholder.com/75x75?text=9'  },
      { label: '10',url: 'https://via.placeholder.com/75x75?text=10' }
          ],
ptags = document.querySelectorAll('[name="values"]');
  
  
 
var lastnumber=0;  
for (let index = 0; index < 3; index++) 
  {
      randomIndex = Math.floor(Math.random() * items.length),
     // const randItem2 = Array.from({ length: 3 },() => {const randomIndex = Math.floor(Math.random() * items.length);const [item] =                                                        items.splice(randomIndex, 1);return item;

      item = items[randomIndex];
      ptags[index].textContent = item.label;
      tempimages.push(item);
	
	  	 
  }

}


function displayAllImages() {

  if (tempimages.length === 0) 
  {
    return;
  }
  
   
    item = tempimages.shift(),

    image = document.getElementById('slide');
 
  image.src = item.url;
};

$(function() {
 
  rvalue();
  displayAllImages(); 
});	

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

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();

  var data = ev.dataTransfer.getData("Text");
  var el = document.getElementById(data);

  el.parentNode.removeChild; 
 
  ev.currentTarget.style.backgroundColor = 'initial'; 

  var pParagraph = ev.currentTarget.firstElementChild;
  ev.currentTarget.removeChild(pParagraph);
  
  // Show the next image in the slider..
  displayAllImages();
}
#container {
  margin-top:-2%;
  white-space:nowrap;
  text-align:center;
  margin-left:20%;
  margin-right:30%;
  display:flex;
}

.box {
  background-color: coral;
  width: 60px;
  flex: 1;
  border-radius:5px;
  border:2px solid #333;
  border-color: #e6e600;
  border-radius: 10%;
  background-color:  #ff00ff;
}

.box002 {
  float: left;
  width: 50px;
  height: 50px;
  float: left;
  margin-left:30%;
  margin-top:-20px;
  padding-top:2%;
  background-color:#ffff00 2px;
  border:2px solid #000066;
}	

.text {
  padding: 20px;
  margin:7 px;
  margin-top:10px;
  color:white;
  font-weight:bold;
  text-align:center;
}

#container {
  white-space:nowrap;
  text-align:center;
  margin-left:20%;
  margin-right:30%;
}

.text {
  padding: 20px;
  margin:7 px;
  margin-top:10px;
  color:white;
  font-weight:bold;
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="rvalue()">

<div class="containerr">
    
<div id="container" style="margin-bottom:10%;">

<div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>

<div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>

<div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>

            </div>
</div>



    
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">

         <img src=""  draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded"/>
        
</div> 
</body>
0
投票

如果你不能使用flexbox，例如为了向后兼容IE9及以下的浏览器，您可以在vertical-align元素上使用.box css属性，如下所示。它是widely supported，以防兼容性是你的问题。但是如果可以的话，按照@ birdie-golden的建议开始使用display: flex - 使用flexbox，你可以构建更加流畅优雅的布局。

var tempimages = [];

function rvalue() {
  const
    items = [  
      { label: '1', url: 'https://via.placeholder.com/75x75?text=1'  },
      { label: '2', url: 'https://via.placeholder.com/75x75?text=2'  },
      { label: '3', url: 'https://via.placeholder.com/75x75?text=3'  },
      { label: '4', url: 'https://via.placeholder.com/75x75?text=4'  },
      { label: '5', url: 'https://via.placeholder.com/75x75?text=5'  },
      { label: '6', url: 'https://via.placeholder.com/75x75?text=6'  },
      { label: '7', url: 'https://via.placeholder.com/75x75?text=7'  },
      { label: '8', url: 'https://via.placeholder.com/75x75?text=8'  },
      { label: '9', url: 'https://via.placeholder.com/75x75?text=9'  },
      { label: '10',url: 'https://via.placeholder.com/75x75?text=10' }
          ],
ptags = document.querySelectorAll('[name="values"]');
  
  
 
var lastnumber=0;  
for (let index = 0; index < 3; index++) 
  {
      randomIndex = Math.floor(Math.random() * items.length),
     // const randItem2 = Array.from({ length: 3 },() => {const randomIndex = Math.floor(Math.random() * items.length);const [item] =                                                        items.splice(randomIndex, 1);return item;

      item = items[randomIndex];
      ptags[index].textContent = item.label;
      tempimages.push(item);
	
	  	 
  }

}


function displayAllImages() {

  if (tempimages.length === 0) 
  {
    return;
  }
  
   
    item = tempimages.shift(),

    image = document.getElementById('slide');
 
  image.src = item.url;
};

$(function() {
 
  rvalue();
  displayAllImages(); 
});	

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

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();

  var data = ev.dataTransfer.getData("Text");
  var el = document.getElementById(data);

  el.parentNode.removeChild; 
 
  ev.currentTarget.style.backgroundColor = 'initial'; 

  var pParagraph = ev.currentTarget.firstElementChild;
  ev.currentTarget.removeChild(pParagraph);
  
  // Show the next image in the slider..
  displayAllImages();
}
#container {
  margin-top:-2%;
  white-space:nowrap;
  text-align:center;
  margin-left:20%;
  margin-right:30%;
}

.box {
  background-color: coral;
  width: 60px;
  height:60px;
  margin-top:10px;
  display:inline-block;
  border-radius:5px;
  border:2px solid #333;
  border-color: #e6e600;
  border-radius: 10%;
  background-color:  #ff00ff;
  vertical-align: middle;
}

.box002 {
  float: left;
  width: 50px;
  height: 50px;
  float: left;
  margin-left:30%;
  margin-top:-20px;
  padding-top:2%;
  background-color:#ffff00 2px;
  border:2px solid #000066;
}	

.text {
  padding: 20px;
  margin:7 px;
  margin-top:10px;
  color:white;
  font-weight:bold;
  text-align:center;
}

#container {
  white-space:nowrap;
  text-align:center;
  margin-left:20%;
  margin-right:30%;
}

.text {
  padding: 20px;
  margin:7 px;
  margin-top:10px;
  color:white;
  font-weight:bold;
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="rvalue()">

<div class="containerr">
    
<div id="container" style="margin-bottom:10%">

<div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10"><p name="values"></p></div>

<div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11"><p name="values"></p></div>

<div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12"><p name="values"></p></div>

            </div>
</div>



    
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">

         <img src=""  draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded"/>
        
</div> 
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.