无法删除动态网格行之间的空格

时间：2018-03-17 14:58:44

标签： javascript jquery html css

让我简单说一下：我正在构建一个网页，根据输入值中提供的行和列绘制网格。当用户单击该按钮时，将获取输入字段值并且必须绘制网格。我无法删除行之间的空格。 在SO上看到很多其他问题。没有人帮助我制作这个

以下是我的网页的快照：

enter image description here

而且，当我更改浏览器大小时，我的井没有调整大小。当浏览器缩小时，它们会在垂直线上运行。

所以这些是我的问题：

  1. 如何删除行之间的空格？
  2. 如何使水井响应？
  3. 如何在中心对齐网格，以便在尺寸增加时将其对齐 增长的重点必须来自中心。不是边缘焦点。

    4. 克隆我的项目： https://github.com/gauravthantry/pixelArtMaker.git

    以下是我的代码：

    ＆＃13;
    ＆＃13; 
    $(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> &nbsp; YELLOW
                            <br>
                            <input type="radio" name="green" value="green" id="green"><i class="fa fa-fire-extinguisher fa3"></i> &nbsp; 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;
    ＆＃13;
    ＆＃13;

1 个答案:

答案 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> &nbsp; YELLOW
              <br>
              <input type="radio" name="green" value="green" id="green"><i class="fa fa-fire-extinguisher fa3"></i> &nbsp; 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>

相关问题
最新问题