Question

我是HTML和CSS基础知识的新手。

尝试创建3 x 3方形“图片”，使用，但找不到简单的解决方案，将正方形放在页面中间，如中间的九个方块。
如何将所有方块放在大边框中？

我们如何实现这一目标？

HTML：

<body>  
    <div class="square-one">
    </div>

    <div class="square-two">
    </div>

    <div class="square-three">
    </div>

    <div class="square-four">
    </div>

    <div class="square-five">
    </div>

    <div class="square-six">
    </div>

    <div class="square-seven">
    </div>

    <div class="square-eight">
    </div>

    <div class="square-nine">
    </div>
</body>

CSS：

body {
    background-color: #000000;
    font-size: 150px;
}

div {
    background: #FFFFFF;
    width: 275px;
    height: 275px;
    margin: 10px 10px 10px 10px;
    float: left;
}

Answer 1

了解display: inline-block CSS属性。我想你想得到以下布局。

body {
    background-color: #000;
    font-size: 150px;
    text-align: center;
}

.square-holder {
    border: 1px solid #fff;
    display: inline-block;
    vertical-align: top;
    letter-spacing: -4px;
    width: 285px;
    font-size: 0;
}

.square {
    background: #fff;
    letter-spacing: 0;
    font-size: 150px;
    width: 75px;
    height: 75px;
    margin: 10px;
    display: inline-block;
    vertical-align: top;
}

<body>
  <div class="square-holder">
    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>

    <div class="square">
    </div>
  </div>
</body>

Answer 2

将text-align - CSS与display - CSS

一起使用

body {
  background-color: #000000;
  font-size: 150px;
  text-align: center /* add this */
}
div {
  background: #FFFFFF;
  width: 25px;
  height: 25px;
  margin: 10px;
  /*float: left; */
  display: inline-block/* add this */
}

<div class="square-one">
</div>

<div class="square-two">
</div>

<div class="square-three">
</div>

<div class="square-four">
</div>

<div class="square-five">
</div>

<div class="square-six">
</div>

<div class="square-seven">
</div>

<div class="square-eight">
</div>

<div class="square-nine">
</div>

CSS <div> square

2 个答案: