Question

我目前正试图制作一个里面有4个小方块的正方形，而且我一直在试图用我想做的方式遇到麻烦。所以这是代码：

＆＃13;

#grandbox {
  position: absolute;
  width: 204px;
  height: 204px;
  border: solid thin black;
  left: 40%;
  top: 8%;
}
div.smallbox {
  border: solid thin black;
  text-align: center;
  width: 100px;
  height: 100px;
  float: left;
  line-height: 100px;
}

＆＃13;

<div id="grandbox">
  <div class="smallbox"></div>
  <div class="smallbox"></div>
  <div class="smallbox"></div>
  <div class="smallbox"></div>
</div>

＆＃13;

我想制作边框的CSS样式：

border: 2px solid black

但是，如果我这样做，那些盒子就会突破大盒子并垂直显示。

我是新手，因为我现在开始使用它，但我不明白为什么它不起作用。

PS：抱歉，如果英语不好，不是我的第一语言。

Answer 1

通常，边框宽度会添加到给定的宽度。使用>>> type(eval(rating)) <class 'bytes'> >>> data_songs[u_ix][i_ix] = float(eval(rating))规则，您可以将边框包含在宽度中，这样您就不会再有中断了。请参阅以下代码段：

＆＃13;

box-sizing: border-box;

＆＃13;

#grandbox {
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid thin black;
  left: 40%;
  top: 8%;
}
div.smallbox {
  border: solid thin black;
  text-align: center;
  width: 100px;
  height: 100px;
  float: left;
  line-height: 100px;
  box-sizing: border-box;
}

＆＃13;

有关框尺寸的更多信息，请参阅https://developer.mozilla.org/de/docs/Web/CSS/box-sizing。

Answer 2

编辑：我的答案更多的是黑客解决方案。 上面接受的答案，自动将包含大小的边框包含在宽度中，这是一个更好的答案。

在你原来的高度和宽度计算中（204）我认为你并不认为每个方格的两边都要大4个像素。

将宽度和高度调整为208px可以解决您的问题。

#grandbox
    {
        position: absolute;
        width:208px;
        height:208px;
        border: 2px solid black;
        left:40%;
        top: 8%;
    }

div.smallbox
    {
        border: 2px solid black;
        text-align: center;
        width: 100px;
        height: 100px;
        float: left;
        line-height: 100px;

    }

<body>
  <div id="grandbox">
    <div class="smallbox">

    </div>
    
    <div class="smallbox">

    </div> 
    
    <div class="smallbox">

    </div>
    
    <div class="smallbox">

    </div>
  </div>
</body>

Answer 3

外框应位于relative和四个内框absolute。然后，您只需使用left right top bottom属性来定位它们。

＆＃13;

#grandbox {
  position: relative;
  width: 204px;
  height: 204px;
  border: solid thin black;
  left: 40%;
  top: 8%;
}
div.smallbox {
  border: solid thin black;
  text-align: center;
  position: absolute;
  width: 100px;
  height: 100px;
  float: left;
  line-height: 100px;
}
div.sb1 {
  top: 0;
  left: 0;
}
div.sb2 {
  top: 0;
  right: 0;
}
div.sb3 {
  left: 0;
  bottom: 0;
}
div.sb4 {
  right: 0;
  bottom: 0;
}

＆＃13;

<div id="grandbox">
  <div class="smallbox sb1">

  </div>
  <div class="smallbox sb2">

  </div>
  <div class="smallbox sb3">

  </div>
  <div class="smallbox sb4">

  </div>
</div>

＆＃13;

这是jsbin版本。

CSS边界问题

3 个答案: