Question

我试图做一个简单的记忆游戏练习，要求使用4x4的纸牌面板，我尝试添加一个带有“ panel”类的中间div部分，该部分限制了460 x 460的面积，足以容纳4张纸牌divs适合，但似乎无法正常工作。我已经添加了16张div，供您查看问题。理想情况下，我计划使用jQuery添加这些内容。

.main {
  display: flex;
}

.columnR {
  flex: 22%;
  border-radius: 10px;
  padding: 10px;
  margin-right: 10px;
  background-color: #FF7600;
}

.columnL {
  flex: 77%;
  border-radius: 10px;
  padding: 10px;
  margin-right: 10px;
  background-color: #FF5810;
}

.panel div {
  display: flex;
  width: 460;
  height: 460;
}

.card {
  flex: 20%;
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
  padding: 5px;
  border: 4px solid #EE872A;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
  background: #B1B1B1;
  z-index: 2;
}

.card:hover {
  border: 5px solid #EE872A;
}

<div class="main">
  <div class="columnL">
    <div class="panel">
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
    </div>
  </div>
  <div class="columnR">Hello World</div>
</div>

Answer 1

您的面板宽460像素，应该有足够的空间容纳四个100像素宽的框。但是，如果使用5像素的填充，4像素的边框和5像素的边距（在每一侧），则您的框实际上为118像素。

默认元素使用content-box box-sizing。这样就创建了我刚刚描述的盒子模型，其内容宽度等于width样式，并且当添加了边距/边框/填充时元素会变大。

我喜欢使用border-box box-sizing。使用这种样式，整个元素将仅是width样式的宽度，并且当应用边距/边框/填充时内容区域会变小。

box-sizing: border-box;

如何在另一个div内制作4X4 div面板？

1 个答案: