Html 垂直堆叠 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19827972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stacking divs vertically
提问by user2923395
I'm programming a tic-tac-toe game and having trouble stacking my game tiles vertically to be 3x3 box.
我正在编写井字棋游戏，但无法将我的游戏图块垂直堆叠为 3x3 框。
As it stands, they are 9 horizontal boxes in a row, but when I use {clear: left;} It just turns them into 9 vertical boxes.
目前，它们是连续 9 个水平框，但是当我使用 {clear: left;} 时，它只是将它们变成了 9 个垂直框。
Here's my code so far:
到目前为止，这是我的代码：
<style type="text/css">
#div1 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left;
}
#div2 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left;
}
#div3 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left;
}
<body>
<p>Drag the X and O images into the tic-tac-toe board:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
回答by justjavac
http://jsfiddle.net/justjavac/9s8CX/
http://jsfiddle.net/justjavac/9s8CX/
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
CSS
CSS
#div1 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left;
clear: left;
}
#div2 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left; // <---- HERE
}
#div3 {
width: 80px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
float:left;
}
回答by Josh Crozier
Why not just create a parentelement, such as #parent, and set a defined width on it? Doing this, you don't have to change the position of the elements in the DOM.
为什么不创建一个parent元素，例如#parent，并在其上设置定义的宽度？这样做，您不必更改元素在 DOM 中的位置。
#parent {
width: 306px;
margin: 0px auto;
}
Alternatively, you could also create rowelements, as parents of each of the 3 child elements, and set display:block. In doing so, you could have to set an explicit width on the parent.. works well for dynamic content, or responsive design..
或者，您也可以创建row元素，作为 3 个子元素中每一个的父元素，并设置display:block. 这样做时，您可能必须在父级上设置显式宽度.. 适用于动态内容或响应式设计..
On a random note, I thought it would be cool to add something like:
在随机笔记中，我认为添加以下内容会很酷：
#parent:hover > div:not(:hover){
background:black;
}
Basically, this sets the background-colorof the children elements to black when hovering over the parent. However, when hovering over the child, it specifically isn't applied.. try hovering over the tiles.
基本上，background-color当悬停在父元素上时，这会将子元素的 设置为黑色。但是，当悬停在孩子上方时，它特别不适用.. 尝试悬停在瓷砖上。
回答by block14
First off, make sure you close your styletag.
首先，请确保关闭style标签。
You don't need to repeat your styles for each row (since it is exactly the same for div1, div2and div3), instead change the IDto a classbecause IDs are intended for a single element.
您不需要为每一行重复您的样式（因为它与div1,div2和完全相同div3），而是将 the 更改ID为 aclass因为 ID 用于单个元素。
To create rows you will need to place the 3 DIVs you want in a row inside another DIVwith the position:relativeattribute.
要创建行，您需要将所需的 3 个 DIV 放置在DIV具有该position:relative属性的另一行中。
CSS:
CSS：
.mydiv {
wclassth: 80px;
height: 80px;
padding: 10px;
border: 1px solclass #aaaaaa;
float:left;
}
.myrow {
position:relative;
}
HTML:
HTML：
<div class="myrow">
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="myrow">
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
<div class="myrow">
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="mydiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
Please note that I added a background color to the mydiv class on the JSFiddle so that it would be visible.
请注意，我在 JSFiddle 上的 mydiv 类中添加了背景颜色，以便它可见。
回答by Woodchipper
Here's another solution using display: inline-block;and some br tags:
这是使用display: inline-block;和一些 br 标签的另一个解决方案：
