所需的网格?"/>
已解决:为什么图块显示为 1 列而不是所需的网格?
使用 Node 和 socket.io 使用 11 x 11 图像键的图像键盘制作图像键聊天室。
此处的图块(图像键)旨在显示为 11 x 11 网格。 它们而是显示为一行。 当我将代码粘贴到 server.js 作为索引页面的 js 和 css 时,它确实将图像容器显示为 11x11,但是 它们显示为大。
这是一个 fiddle,其中粘贴了 index.html、style 和 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;
}
回答如下:
Style.css 在错误的目录中。把它放在“公共”中,一切都很好。
更多推荐
已解决:为什么图块显示为 1 列而不是所需的网格?
发布评论