div类的对齐在放置时中断

时间：2018-09-18 17:59:30

标签： html css

我有一个带CSS的div类框，它具有响应性，

我的问题是，当我将div class box002拖放到class box时，它会从对齐状态中退出，

如何在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>

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

如果您不能使用flexbox，例如为了向后兼容IE9及以下版本的浏览器，可以在<!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script> </head> <body> <a-scene> <a-assets> <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg"> </a-assets> <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box> <a-sky color="#222"></a-sky> </a-scene> </body> </html> 元素上使用vertical-align css属性，如下所示。如果您担心兼容性，则为widely supported。但是，如果可以的话，请按照@ birdie-golden的建议开始使用.box-通过flexbox，您可以构建更加流畅和优雅的布局。

display: flex
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;
}

相关问题
最新问题