如何沿屏幕制作 150x150 方格的 div答案

【问题标题】：How do I make divs of 150x150 squares along the screen如何沿屏幕制作 150x150 方格的 div
【发布时间】：2012-08-08 19:14:57
【问题描述】：

*并在新行填充前一行时开始新行？
这应该可以，但不适合我，
html:

<div id="squares">
<div id="1">
width:150px;
height:150px;
</div>
<div id="2">
width:150px;
height:150px;
</div>
<div id="3">
width:150px;
height:150px;
</div>  
</div>

所以这在页面上建立了 3 个框

css:

#squares {
display:inline;
background-color:#000000;
}

css 应该告诉他们排队并且是黑色的，这样我们才能看到他们，判断他们是否在正确的位置。
我需要添加什么吗？你能想出任何不同的方法来达到这个结果吗？

【问题讨论】：

如果没有 javascript，您将无法做到这一点。
这段代码有很多问题。您的宽度和高度分配是 <div> 元素的内容，而不是应用于它们的样式。您的 CSS 规则以容器为目标，而不是其中的 <div>s。 inline 元素不接受宽度和高度。
你可以在没有 javascript 的情况下做到这一点，如下回答 div {float:left;}

标签： html inline tiling

【解决方案1】：

HTML

<div id="squares">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
</div>

CSS

#squares div {
    /* these styles will let the divs line up next to each other
       while accepting dimensions */
    display: block;
    float: left;

    width: 150px;
    height: 150px;
    background: black;

    /* a small margin to separate the blocks */
    margin-right: 5px;
}

使用float 的替代方法是使用inline-block 样式：

display: inline-block;
zoom: 1;
*display: inline;

【讨论】：

【解决方案2】：

您缺少一个 div 语句，表明它必须应用于 id 为“squares”的 div 内的 div：

css:
#squares div {
display:inline;
background-color:#000000;
}

【讨论】：

【解决方案3】：

最好的方法是使用 display: inline-block;

HTML

<div id="squares">
<div id="1" class="square">
</div><div id="2" class="square">
</div><div id="3" class="square">
</div>
</div>

请注意 HTML 标记的格式，重要的是避免在使用显示内联块时在元素之间获得额外的边距 (check this)

CSS：

.square {
background-color: #000;
display: inline-block;
height: 150px;
vertical-align: top;
width: 150px;
*display: inline;
zoom: 1;
}

出于开发目的，您可以添加： CSS：

.square {outline: 1px solid red;}

这样您就可以在不破坏布局的情况下查看它们的尺寸（通过扩展元素的自然宽度）

【讨论】：

【解决方案4】：

我认为你不见了；

div {float:left;}

【讨论】：

【解决方案5】：

如果我理解正确，您希望每个 div #1 #2 和 #3 的宽度和高度都为 150px，在这种情况下都排成一行

你想定位每个 div 而不是主要的，像这样

#squares > div {
    display:block;
    float:left;
    width:150px;
    height:150px;
    background-color:#000000;
    margin-right:5px;
}

【讨论】：