让我简单说一下:我正在构建一个网页,根据输入值中提供的行和列绘制网格。当用户单击该按钮时,将获取输入字段值并且必须绘制网格。我无法删除行之间的空格。 在SO上看到很多其他问题。没有人帮助我制作这个
以下是我的网页的快照:
而且,当我更改浏览器大小时,我的井没有调整大小。当浏览器缩小时,它们会在垂直线上运行。
所以这些是我的问题:
克隆我的项目: https://github.com/gauravthantry/pixelArtMaker.git
以下是我的代码:
$(document).ready(function() {
$("#grid-input").click(function() {
$(".drawing-area").empty();
var rows = $("#row").val();
var cols = $("#col").val();
if (rows > 0 && cols > 0) {
for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= cols; j++) {
$(".drawing-area").append('<canvas id="myPixel" width="20px" height="20px" style="border: 1px solid #000; "></canvas>');
}
$(".drawing-area").append('<br/>');
}
} else {
alert("You haven't provided the grid size!");
}
});
});
&#13;
.page-position{
background-image: url("https://i.pinimg.com/originals/f8/03/50/f8035042eda4eaeac4013e4f79ed85b2.jpg");
width:100%;
height: 100%;
}
.content-position{
background-color: rgba(255,255,255,0.6);
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 2%;
height: 600px;
width: 96%;
position: absolute;
}
.heading{
text-align: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
padding-top: 10px;
}
.fa1{
color: blue;
}
.fa2{
color: yellow;
}
.fa3{
color: green;
}
.vertical-line{
border-left: 1px solid white;
height: 478px;
margin-left: 30px;
}
.color-option-container{
width: 300px;
background-color: rgba(255,255,255,0.4);
}
.color-select{
}
.grid-size-container{
background-color: rgba(255,255,255,0.4);
width: 300px;
}
.text-line{
border: none;
border-bottom: 1px solid;
width: 30%;
margin-bottom: 10px;
background: transparent;
}
.rows{
float: left;
}
.cols{
float: center;
margin-left: 20px;
}
.drawing-area{
text-align: center;
padding: 210px 0;
}
.btn-size{
text-align: center;
width: 60px;
}
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
<title>PIXEL ART MAKER</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="js/app.js"></script>
</head>
<body class="page-position">
<!-- Content starts here -->
<section class="content-position container-fluid">
<section class="heading">
<h1><i class="fa fa-fire-extinguisher fa1"></i> DRAW THE PIXELS</h1>
</section>
<hr>
<section>
<section class="row-fluid">
<section class="col-xs-3">
<section class="well well-lg container-fluid color-option-container">
<form class="color-select">
<input type="radio" name="blue" value="blue" id="blue" checked><i class="fa fa-fire-extinguisher fa1"></i> BLUE
<br>
<input type="radio" name="yellow" value="yellow" id="yellow"><i class="fa fa-fire-extinguisher fa2"></i> YELLOW
<br>
<input type="radio" name="green" value="green" id="green"><i class="fa fa-fire-extinguisher fa3"></i> GREEN
</form>
</section>
<br>
<section class="well well-lg container-fluid grid-size-container">
<input type="text" class="text-line rows" id="row" placeholder="Rows">
<input type="text" class="text-line cols" id="col" placeholder="Cols">
<br/>
<button type="submit" class="btn-size btn btn-block btn-primary" id="grid-input"><i class="fa fa-th-large" aria-hidden="true"></i></button>
</section>
</section>
<section class="col-xs-1 vertical-line"></section>
<section class="col-xs-6">
<section class="drawing-area">
</section>
</section>
</section>
</section>
</section>
</body>
</html>
&#13;
答案 0 :(得分:0)
尝试font-size:0
或line-height:0
到父类.drawing-area
同时从您的width:300px
课程中删除.well
另外,如评论中所述float:center
不是有效值...所以最好将其删除
$(document).ready(function() {
$("#grid-input").click(function() {
$(".drawing-area").empty();
var rows = $("#row").val();
var cols = $("#col").val();
if (rows > 0 && cols > 0) {
for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= cols; j++) {
$(".drawing-area").append('<canvas id="myPixel" width="20px" height="20px" style="border: 1px solid #000; "></canvas>');
}
$(".drawing-area").append('<br/>');
}
} else {
alert("You haven't provided the grid size!");
}
});
});
.page-position {
background-image: url("https://i.pinimg.com/originals/f8/03/50/f8035042eda4eaeac4013e4f79ed85b2.jpg");
width: 100%;
height: 100%;
}
.content-position {
background-color: rgba(255, 255, 255, 0.6);
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 2%;
height: 600px;
width: 96%;
position: absolute;
}
.heading {
text-align: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
padding-top: 10px;
}
.fa1 {
color: blue;
}
.fa2 {
color: yellow;
}
.fa3 {
color: green;
}
.vertical-line {
border-left: 1px solid white;
height: 478px;
margin-left: 30px;
}
.color-option-container {
width: 300px;
background-color: rgba(255, 255, 255, 0.4);
}
.color-select {}
.grid-size-container {
background-color: rgba(255, 255, 255, 0.4);
width: 300px;
}
.text-line {
border: none;
border-bottom: 1px solid;
width: 30%;
margin-bottom: 10px;
background: transparent;
}
.rows {
float: left;
}
.cols {
margin-left: 20px;
}
.drawing-area {
text-align: center;
padding: 210px 0;
font-size: 0;
}
.btn-size {
text-align: center;
width: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body class="page-position">
<!-- Content starts here -->
<section class="content-position container-fluid">
<section class="heading">
<h1><i class="fa fa-fire-extinguisher fa1"></i> DRAW THE PIXELS</h1>
</section>
<hr>
<section>
<section class="row-fluid">
<section class="col-xs-3">
<section class="well well-lg container-fluid color-option-container">
<form class="color-select">
<input type="radio" name="blue" value="blue" id="blue" checked><i class="fa fa-fire-extinguisher fa1"></i> BLUE
<br>
<input type="radio" name="yellow" value="yellow" id="yellow"><i class="fa fa-fire-extinguisher fa2"></i> YELLOW
<br>
<input type="radio" name="green" value="green" id="green"><i class="fa fa-fire-extinguisher fa3"></i> GREEN
</form>
</section>
<br>
<section class="well well-lg container-fluid grid-size-container">
<input type="text" class="text-line rows" id="row" placeholder="Rows">
<input type="text" class="text-line cols" id="col" placeholder="Cols">
<br/>
<button type="submit" class="btn-size btn btn-block btn-primary" id="grid-input"><i class="fa fa-th-large" aria-hidden="true"></i></button>
</section>
</section>
<section class="col-xs-1 vertical-line"></section>
<section class="col-xs-6">
<section class="drawing-area"></section>
</section>
</section>
</section>
</section>
</body>