html – 垂直堆叠div_html-js-css

概述我正在编写一个井字游戏,并且无法将我的游戏牌垂直堆叠成3×3盒子. 就目前而言,它们是连续9个水平方框,但是当我使用{clear：left;}它只是将它们变成9个垂直方框. 到目前为止,这是我的代码： <style type="text/css">#div1 { width: 80px; height: 80px; padding: 10px; border: 1 我正在编写一个井字游戏,并且无法将我的游戏牌垂直堆叠成3×3盒子.

就目前而言,它们是连续9个水平方框,但是当我使用{clear：left;}它只是将它们变成9个垂直方框.

到目前为止,这是我的代码：

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

解决方法 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

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

总结

以上是内存溢出为你收集整理的html – 垂直堆叠div全部内容，希望文章能够帮你解决html – 垂直堆叠div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1086009.html