我有一个脚本可以显示三个<div>个元素正常工作，但当我添加display: inline或float: left时，这三个块会消失。
这是我的第一个JavaScript项目，对我来说只是一个沙箱。
<!DOCTYPE html>
<html>
<head>
<title>Paint by Pixels</title>
<link rel="stylesheet" type="text/css" href="pixel_styles.css" />
<script language="javascript" type="text/javascript" src="jquery-1.11.2.js"></script>
</head>
<body>
<div class="canvas"></div>
<script src="pixel_script.js"></script>
</body>
</html>
.pixel {
height: 100px;
max-width: 100px;
background-color: black;
margin: 2px;
}
.canvas {
}
for(i = 0; i < 3; i++) {
var $newPixel = $('<div class="pixel"></div>');
$('div.canvas').prepend($newPixel);
}
我还无法上传图片，但结果是三个垂直黑框，当我在顶部提到的CSS添加时，它们会消失而不是内联。
答案 0 :(得分：2)
他们在那里 - 但他们没有宽度。如果您使用inline-block并设置min-width它们显示正常（如果您在这些div中有内容，则可以删除min-width。）
.pixel {
height: 100px;
min-width: 100px;
max-width: 100px;
background-color: black;
margin: 2px;
display: inline-block;
}