Question

我在制作特定宽度的网格样式时遇到问题。我想将宽度的大小设置为正文宽度的一半。我试过了，但它几乎消耗了整个页面的宽度。我想减少它的宽度。任何人都可以告诉我如何减少网格的宽度
这是我试过的代码。

enter code here
<!DOCTYPE html>
<html lang="en">
<head>
<style>



    .floating-box {
        display:inline-block;
        width: 50px;
        height: 75px;
        margin: 10px;
        border: 3px solid #8AC007;
    }
</style>


</head>
<body>
<div class="floating-box">Grid Box</div>
<div class="floating-box">Grid Box</div>
<div class="floating-box">Grid Box</div>
<div class="floating-box">Grid Box</div>
<div class="floating-box">Grid box</div>
<div class="floating-box">Grid box</div>
<div class="floating-box">Grid box</div>
<div class="floating-box">Grid box</div>

</body>
</html>

https://jsfiddle.net/4gzkx53q/1/

Answer 1

好的检查这个，我认为它更干净的代码，将div单元格包含在主div网格中并赋予它宽度，也可以删除每个div中的类，并使用父类将样式应用于其所有子div

.grid div

如例：

https://jsfiddle.net/4gzkx53q/5/

如何制作特定宽度的网格样式？

1 个答案: