4

He estado intentando quitar el espacio que se forma entre las filas de los cuadros. Esto es lo que he intentado.

He intentado solo ponerle border:1 px solid black y sigue sin tomar la forma que me gustaria. Quiero que quede la cuadricula sin esa doble linea que se observa.

var div = document.getElementById("click");
guessX = 0;
guessY = 0;

function capturaCoor(event) {
  var x = event.offsetX;
  var y = event.offsetY;
  guessX = x;
  guessY = y;
  console.log("x coords: " + guessX + ", y coords: " + guessY);
}
var i, j;
for (i = 0; i < 525; i++) {
  $("#click").prepend($('<div class="re"></div>'));
}
$(".re:odd").css("background-color", "white");
body,
html {
  padding: 0;
  margin: 0;
}

.re {
  height: 20px;
  width: 20px;
  background-color: black;
  cursor: pointer;
  border-bottom: 1px solid;
  border-top: 1px solid;
}

.re:hover {
  background-color: red;
}

#click {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click" onclick="capturaCoor(event)"></div>

Saludos!

7
  • esta bien como formas esos divs? el 27 abr. 2018 a las 14:58
  • @SebastiánLagosYañez No sé, crees que hay una mejor forma?
    – Alvarez
    el 27 abr. 2018 a las 15:01
  • lo que pasa que no cerraste la etiquerda div aca mira ('<div class="re"</div>')); el 27 abr. 2018 a las 15:04
  • @SebastiánLagosYañez Lo cerre y sigue igual.
    – Alvarez
    el 27 abr. 2018 a las 15:07
  • 1
    mira lo curioso @Luis Fernando height: 20px; ponlo asi en el re height: auto; el 27 abr. 2018 a las 15:08

3 respuestas 3

5

En tu caso esta definiendo las alturas, por lo tanto se resuelve de la siguiente manera solo colocando en el #click el height: auto; y quitando los border de la clase .re

var div = document.getElementById("click");
guessX = 0;
guessY = 0;

function capturaCoor(event) {
  var x = event.offsetX;
  var y = event.offsetY;
  guessX = x;
  guessY = y;
  console.log("x coords: " + guessX + ", y coords: " + guessY);
}
var i, j;
for (i = 0; i < 525; i++) {
  $("#click").prepend($('<div class="re"></div>'));
}
$(".re:odd").css("background-color", "white");
body,
html {
  padding: 0;
  margin: 0;
}

.re {
  height: 20px;
  width: 20px;
  background-color: black;
  cursor: pointer;

}

.re:hover {
  background-color: red;
}

#click {
  width: 500px;
  height: auto;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click" onclick="capturaCoor(event)"></div>

2

Agregando al contenedor align-content: baseline; debería justificar los elementos.

var div = document.getElementById("click");
guessX = 0;
guessY = 0;

function capturaCoor(event) {
  var x = event.offsetX;
  var y = event.offsetY;
  guessX = x;
  guessY = y;
  console.log("x coords: " + guessX + ", y coords: " + guessY);
}
var i, j;
for (i = 0; i < 525; i++) {
  $("#click").prepend($('<div class="re"></div>'));
}
$(".re:odd").css("background-color", "white");
body,
html {
  padding: 0;
  margin: 0;
}

.re {
  height: 20px;
  width: 20px;
  background-color: black;
  cursor: pointer;
  border-bottom: 1px solid;
  border-top: 1px solid;
}

.re:hover {
  background-color: red;
}

#click {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  align-content: baseline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click" onclick="capturaCoor(event)"></div>


Si querés aprender más a cómo utilizar flex, te recomiendo que pruebes con esta página para principiantes que te explican bastante bien y con un juego.

1

le puedes quitar la altura. También al crear tus DIVS estaban mal cerrados.

Saludos

var div = document.getElementById("click");
guessX = 0;
guessY = 0;

function capturaCoor(event) {
  var x = event.offsetX;
  var y = event.offsetY;
  guessX = x;
  guessY = y;
  console.log("x coords: " + guessX + ", y coords: " + guessY);
}
var i, j;
for (i = 0; i < 525; i++) {
  $("#click").prepend($('<div class="re"></div>'));
}
$(".re:odd").css("background-color", "white");
body,
html {
  padding: 0;
  margin: 0;
}

.re {
  width: 20px;
  background-color: black;
  cursor: pointer;
  
}

.re:hover {
  background-color: red;
}

#click {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  display: flex;
  flex-wrap: wrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click" onclick="capturaCoor(event)"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.