已解决：为什么图块显示为 1 列而不是所需的网格？

Question

使用 Node 和 socket.io 使用 11 x 11 图像键的图像键盘制作图像键聊天室。

此处的图块（图像键）旨在显示为 11 x 11 网格。 它们而是显示为一行。 当我将代码粘贴到 server.js 作为索引页面的 js 和 css 时，它确实将图像容器显示为 11x11，但是 它们显示为大。

这是一个 fiddle，其中粘贴了 index.html、style.cc 和 client.js - 抱歉，我不确定如何正确上传它们。

忽略测试数组，除非那是导致问题的原因。当然，我已经导入了足够的内容以使其至少显示 1 行。

这是 server.js

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const path = require('path');

const app = express();
const server = http.createServer(app);
const io = socketIO(server);

// Serve the static files from the public folder
app.use(express.static(path.join(__dirname, '../public')));

// Listen for incoming connections from clients
io.on('connection', (socket) => {
    console.log('A user has connected');

    // Listen for incoming chat messages from clients
    socket.on('chat message', (msg) => {
        console.log(`Message: ${msg}`);
        io.emit('chat message', msg); // Broadcast the message to all connected clients
    });

    // Listen for disconnections from clients
    socket.on('disconnect', () => {
        console.log('A user has disconnected');
    });
});

// Start the server
server.listen(3000, () => {
    console.log('Server started on port 3000');
});
Here is the automatic size modification that didn't work
.image-key {
    width: calc((100% - 10 * 5px) / 11);
    height: calc((100% - 10 * 5px) / 11);
    background-color: #ccc;
    cursor: pointer;
    position: relative;
}

文件结构在图像中。

....

我试过将它们设为 50 px、70 px、100 px，并使用自动大小，但都无济于事。

这里是没用的自动尺寸修改

.image-key {
    width: calc((100% - 10 * 5px) / 11);
    height: calc((100% - 10 * 5px) / 11);
    background-color: #ccc;
    cursor: pointer;
    position: relative;
}

Answer 1

Style.css 在错误的目录中。把它放在“公共”中，一切都很好。