gpt4 book ai didi

html - CSS
正方形

转载 作者:行者123 更新时间:2023-11-28 17:29:34 29 4
gpt4 key购买 nike

我是 HTMLCSS 的新手。

  1. 尝试创建 3 x 3 正方形“图片”,使用 ,但无法找到将正方形放在页面中间的简单解决方案,例如中间有九个正方形。

  2. 如何把所有的方 block 都放在大边框的正方形里?

我们怎样才能做到这一点?

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;
}

最佳答案

了解 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>

关于html - CSS <div> 正方形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37360245/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com