Tengo una cuadrícula hecha de DIV con un ancho fijo y un borde de 1 px. Ahora, donde dos DIV se tocan entre sí, el borde se vuelve 2px, obviamente.Rejilla CSS con 1px borde
¿Cómo puedo obtener un borde de 1px en toda la cuadrícula?
Esto es lo que quiero decir:
http://jsfiddle.net/Before/4uPtj/
podría bordear ayuda propiedad colapso?
La propiedad border-collapse establece si los bordes de la tabla se colapsan en un solo borde o se desprenden como en HTML estándar.
Ver: http://www.w3schools.com/cssref/pr_border-collapse.asp
table#myTable
{
border-collapse:collapse;
}
Este es el enfoque más limpio, y en una sola línea de CSS. Cambié la respuesta aceptada de Tobi a esta. – ONOZ
Prueba esto:
div.griditem
{
display: inline-block;
border: 1px solid black;
width: 18px;
height: 18px;
margin-left: -1px;
margin-bottom: -1px;
}
+1 porque este funciona con un mínimo esfuerzo, no es necesario que sea perfecto como el de un píxel. – Izkata
Esto acaba de solucionar mi problema. Estaba teniendo exactamente el mismo problema cuando encontré esto. Resolvió mi problema perfectamente. Muchas gracias. – Margate
solución de trabajo y ordenada, +1. –
Hola que define su gridcontainer con acuerdo a su div GridItem
como este
css
div.gridcontainer
{
width: 76px;
line-height: 0;
border: solid black;
border-width: 0 1px 1px 0;
}
div.griditem
{
display:inline-block;
border: solid black;
border-width: 1px 0 0 1px;
width: 18px;
height: 18px;
}
HTML
<div class="gridcontainer">
<div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>
Demostración en directo aquí http://jsfiddle.net/rohitazad/4uPtj/1/
<style>
.gridcontainer .griditem
{
border : 2px solid rgba(204,204,204,0.8) !important;
margin-left:-1px;
margin-right:-1px;
margin-top: -1px;
margin-bottom: -1px;
}
</style>
¿Puede decirme la diferencia entre esto y la respuesta de Tobi? No lo veo – ONOZ
Ésta es otra manera de hacerlo sin márgenes negativos: http://jsfiddle.net/e5crg405/
div.gridcontainer {
width: 80px;
line-height: 0;
}
div.griditem {
display: inline-block;
border-bottom: 1px solid black;
border-right: 1px solid black;
width: 18px;
height: 18px;
}
div.griditem:nth-child(4n + 1) {
border-left: 1px solid black;
}
div.griditem:nth-child(-n + 4) {
border-top: 1px solid black;
}
Muy útil para el diseño sin respuesta :) – gonatee
he utilizado CCS Diseño de cuadrícula (display: rejilla)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
container {
width: 100%;
height: 100%;
}
img {
max-width: 100%;
display: block;
}
.grid {
\t display: grid;
\t background-color: #000;
\t border: 1px solid #000;
\t grid-gap: 1px;
\t justify-self: center;
\t max-width: 282px;
\t height: auto;
\t margin: 0 auto;
}
.box {
position: relative;
}
.cell::before {
content: "";
position: absolute;
display: block;
border: 10px solid #fff;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.box:hover::after {
content: "+";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: white;
font-size: 60px;
font-weight: bold;
}
.box:hover .cell::after {
content: "";
display: block;
position: absolute;
border: 1px solid red;
left: -1px;
right: -1px;
bottom: -1px;
top: -1px;
}
.cell {
position: relative;
pointer-events: none;
}
.box:hover {
background-color: red;
}
.box:hover .cell::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(255,0,0,0.5);
}
@media only screen and (min-width: 768px) {
\t .grid {
\t \t grid-template-columns: repeat(2, 1fr);
\t \t grid-template-rows: repeat(4, 1fr);
\t \t max-width: 563px;
\t }
}
@media only screen and (min-width: 1024px) {
\t
\t .grid {
\t \t grid-template-columns: repeat(4, 1fr);
\t \t grid-template-rows: repeat(2, 1fr);
\t \t max-width: 1124px;
\t }
}<div class="container">
<div class="grid">
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
<div class="box">
<div class="cell"><img src="http://placehold.it/270x270"></div>
</div>
</div>
</div>
que tuvo en cuenta el uso de 'table', pero me elige para DIVs porque la red no es realmente para los datos tabulares. Cada cuadrado debe permanecer cuadrado sin importar qué, y las filas no deben estirarse por contenido desbordado. – ONOZ