我正在制作一个简单的井字棋游戏来娱乐。一切工作正常，除了每当我调整窗口大小时，我最右边的 div 都会开始一个新行。为什么会出现这种情况？我几乎尝试了所有的方法。我做了一个根据窗口大小改变div大小的方法。我尝试过 float :左。我尝试过显示:内联和显示:内联 block 。这是我的代码:
<div id = "pieces">
<style>
.pieces
{
width: 100%;
height: 100%;
float: left;
white-space: nowrap;
overflow: auto;
margin-left: auto;
margin-right: auto;
}
</style>
<div id = "xMark" class = "x">
X
<script>
window.addEventListener("resize", function dimensions() {
var textWidth = (window.innerWidth/3);
var textHeight = (window.innerHeight/3);
document.getElementById("xMark").style.height = textHeight+"px";
document.getElementById("xMark").style.width = textWidth+"px";
});
//document._intervalId = setInterval(dimensions, 1);
</script>
<style>
.x
{
height: 33.333333333333vh;
display: inline-block;
width: 33.333333333333vw;
background-color: lightblue;
font-size: 30px;
border: 5px solid black;
text-align: center;
vertical-align: middle;
overflow: auto;
}
.x:hover
{
background-color: blue;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: auto;
}
</style>
</div>
<div id = "hyphonMark" class = "hyphon">
--
<script>
window.addEventListener("resize", function dimensions() {
var textWidth = (window.innerWidth/3);
var textHeight = (window.innerHeight/3);
document.getElementById("hyphonMark").style.height = textHeight+"px";
document.getElementById("hyphonMark").style.width = textWidth+"px";
});
//document._intervalId = setInterval(dimensions, 1);
</script>
<style>
.hyphon
{
height: 33.333333333333vh;
display: inline-block;
width: 33.333333333333vw;
background-color: lightblue;
font-size: 30px;
border: 5px solid black;
text-align: center;
vertical-align: middle;
overflow: auto;
}
.hyphon:hover
{
background-color: blue;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
</style>
</div>
<div id = "oMark" class = "O">
O
<script>
function dimensions() {
var textWidth = (window.innerWidth/3);
var textHeight = (window.innerHeight/3);
document.getElementById("oMark").style.height = textHeight+"px";
document.getElementById("oMark").style.width = textWidth+"px";
}
document.getElementById("oMark").addEventListener("resize", dimensions);
//document._intervalId = setInterval(dimensions, 1);
</script>
<style>
.O
{
height: 33.333333333333vh;
display: inline-block;
width: 32.333333333333vw;
background-color: lightblue;
font-size: 30px;
border: 5px solid black;
text-align: center;
vertical-align: middle;
overflow: auto;
}
.O:hover
{
background-color: blue;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
</style>
</div>
</div>
</div>最佳答案
您需要将 .pieces (类)更改为 #pieces (id)，然后您的 CSS 才能工作。
<div id="pieces">
<style>
#pieces
{
width: 100%;
height: 100%;
float: left;
white-space: nowrap;
overflow: auto;
margin-left: auto;
margin-right: auto;
}
</style>
<div id = "xMark" class = "x">
X
<script>
window.addEventListener("resize", function dimensions() {
var textWidth = (window.innerWidth/3);
var textHeight = (window.innerHeight/3);
document.getElementById("xMark").style.height = textHeight+"px";
document.getElementById("xMark").style.width = textWidth+"px";
});
//document._intervalId = setInterval(dimensions, 1);
</script>
<style>
.x
{
height: 33.333333333333vh;
display: inline-block;
width: 33.333333333333vw;
background-color: lightblue;
font-size: 30px;
border: 5px solid black;
text-align: center;
vertical-align: middle;
overflow: auto;
}
.x:hover
{
background-color: blue;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: auto;
}
</style>
</div>
<div id = "hyphonMark" class = "hyphon">
--
<script>
window.addEventListener("resize", function dimensions() {
var textWidth = (window.innerWidth/3);
var textHeight = (window.innerHeight/3);
document.getElementById("hyphonMark").style.height = textHeight+"px";
document.getElementById("hyphonMark").style.width = textWidth+"px";
});
//document._intervalId = setInterval(dimensions, 1);
</script>
<style>
.hyphon
{
height: 33.333333333333vh;
display: inline-block;
width: 33.333333333333vw;
background-color: lightblue;
font-size: 30px;
border: 5px solid black;
text-align: center;
vertical-align: middle;
overflow: auto;
}
.hyphon:hover
{
background-color: blue;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
</style>
</div>
<div id = "oMark" class = "O">
O
<script>
function dimensions() {
var textWidth = (window.innerWidth/3);
var textHeight = (window.innerHeight/3);
document.getElementById("oMark").style.height = textHeight+"px";
document.getElementById("oMark").style.width = textWidth+"px";
}
document.getElementById("oMark").addEventListener("resize", dimensions);
//document._intervalId = setInterval(dimensions, 1);
</script>
<style>
.O
{
height: 33.333333333333vh;
display: inline-block;
width: 32.333333333333vw;
background-color: lightblue;
font-size: 30px;
border: 5px solid black;
text-align: center;
vertical-align: middle;
overflow: auto;
}
.O:hover
{
background-color: blue;
vertical-align: middle;
text-align: center;
cursor: pointer;
}
</style>
</div>
</div>
</div>关于javascript - 如何确保在调整窗口大小时 div 不会开始新行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40391789/