如何阻止网格超出其容器div？

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

我有这个交互式网格，当我将鼠标悬停在单元格上时，它会为内部divs背景色上色，但是它正在通过容器内部进行着色，如何使它只对容器内部进行着色？它似乎停在容器的顶部和侧面，但是底部可以在整个页面上向下着色。这是我的代码

***HTML**
<!DOCTYPE html>
<html>
    <head> 
         <title> Claudias Etch-A-Sketch</title>
         <link rel= "stylesheet"  href="style.css">     
    </head>


<body>
    <section class="back">
        <h1>
          <center> Claudia Etch-A-Sketch!</center>
        </h1>
      </section>
      <section>
        <center><div>
          <button class="Black">Black</button>
          <button class="Pink">Pink</button>
          <button class="Clear">Eraser</button>
        </div></center>
      </section>
      <section>
       <center><div id="container"> </div></center>
      </section>
</body>

<script src ="javascript.js"> </script>
</html>

**JAVASCRIPT**

const container = document.getElementById("container");
const btn = document.querySelector('button');


let y = document.querySelectorAll('button');
y.forEach(button => {
  button.addEventListener('click', () => {
    let choice = button.innerHTML;
    switch (choice) {
      case "Pink":
        random();
        break;
      case "Black":
        blackchange();
        break;
      case "Eraser":
        reset();
        break;
    }
  });
});

var currentMouseoverFunction = function() {};

function blackchange() {
  container.removeEventListener('mouseover', currentMouseoverFunction);
  currentMouseoverFunction = function(e) {
    e.target.classList.remove('pink');
    e.target.classList.remove('reset');
    e.target.classList.add('black');
  };
  container.addEventListener('mouseover', currentMouseoverFunction);
};

function random() {
  container.removeEventListener('mouseover', currentMouseoverFunction);
  currentMouseoverFunction = function(e) {
    e.target.classList.remove('black');
    e.target.classList.remove('reset');
    e.target.classList.add('pink');
  };
  container.addEventListener('mouseover', currentMouseoverFunction);
};

function reset() {
  container.removeEventListener('mouseover', currentMouseoverFunction);
  currentMouseoverFunction = function(e) {
    e.target.classList.remove('black');
    e.target.classList.remove('pink');
    e.target.classList.add('reset');
  };
  container.addEventListener('mouseover', currentMouseoverFunction);
};

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    container.appendChild(cell).className = "griditem";
  };
};

makeRows(24, 24);

**CSS**

#container{

  width:500px;
  height:500px;
 margin-top: 30px;
 margin-bottom: 300px;
  background:#eee;
}

#container div {
 position: center;
 float:left;
 height: 35px;
 width: 35px
} 

.black {
  background: black;
}

.pink {
  background: pink;
}

.reset {
  background: transparent;
}
javascript html css
1个回答
2
投票

div中的#container在CSS中与float:left;一起向左浮动。 Float会将元素从页面的常规布局中移出，因此#container的高度不会随其内容扩展。要解决此问题，请删除height:500px;的显式#container高度定义，并在clear内的.griditem div之后添加#container元素。

const container = document.getElementById("container");
const btn = document.querySelector('button');


let y = document.querySelectorAll('button');
y.forEach(button => {
  button.addEventListener('click', () => {
    let choice = button.innerHTML;
    switch (choice) {
      case "Pink":
        random();
        break;
      case "Black":
        blackchange();
        break;
      case "Eraser":
        reset();
        break;
    }
  });
});

var currentMouseoverFunction = function() {};

function blackchange() {
  container.removeEventListener('mouseover', currentMouseoverFunction);
  currentMouseoverFunction = function(e) {
    e.target.classList.remove('pink');
    e.target.classList.remove('reset');
    e.target.classList.add('black');
  };
  container.addEventListener('mouseover', currentMouseoverFunction);
};

function random() {
  container.removeEventListener('mouseover', currentMouseoverFunction);
  currentMouseoverFunction = function(e) {
    e.target.classList.remove('black');
    e.target.classList.remove('reset');
    e.target.classList.add('pink');
  };
  container.addEventListener('mouseover', currentMouseoverFunction);
};

function reset() {
  container.removeEventListener('mouseover', currentMouseoverFunction);
  currentMouseoverFunction = function(e) {
    e.target.classList.remove('black');
    e.target.classList.remove('pink');
    e.target.classList.add('reset');
  };
  container.addEventListener('mouseover', currentMouseoverFunction);
};

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    container.appendChild(cell).className = "griditem";
  };
  let cell = document.createElement("span");
  container.appendChild(cell).style.display = "block";
  cell.style.clear = "both";
};

makeRows(24, 24);
#container {
  width: 500px;
  margin-top: 30px;
  margin-bottom: 300px;
  background: #eee;
}

#container div {
  position: center;
  float: left;
  height: 35px;
  width: 35px
}

.black {
  background: black;
}

.pink {
  background: pink;
}

.reset {
  background: transparent;
}
<section class="back">
  <h1>
    <center> Claudia Etch-A-Sketch!</center>
  </h1>
</section>
<section>
  <center>
    <div>
      <button class="Black">Black</button>
      <button class="Pink">Pink</button>
      <button class="Clear">Eraser</button>
    </div>
  </center>
</section>
<section>
  <center>
    <div id="container"> </div>
  </center>
</section>

作为旁注，您的.griditem div分别为35px宽，因此，如果要将其设为24x24正方形网格，则应使#container 840px宽。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.