Ich habe ein Raster aus DIV mit einer festen Breite und einer Grenze von 1 px. Jetzt, wo sich zwei DIVs berühren, wird die Grenze offensichtlich 2px.CSS-Gitter mit 1px Grenze
Wie kann ich nur einen 1px Rahmen im gesamten Raster bekommen? Diese
ist, was ich meine:
http://jsfiddle.net/Before/4uPtj/
Könnte Zusammenbruch Eigenschaft Hilfe Grenze?
Die border-collapse -Eigenschaft legt fest, ob die Tabellenrahmen in einem einzigen Rahmen zusammengelegt oder wie im Standard-HTML-Format getrennt werden.
See: http://www.w3schools.com/cssref/pr_border-collapse.asp
table#myTable
{
border-collapse:collapse;
}
Dies ist der sauberste Ansatz und in einer einzigen CSS-Zeile. Ich habe die akzeptierte Antwort von Tobi auf diese geändert. – ONOZ
Try this:
div.griditem
{
display: inline-block;
border: 1px solid black;
width: 18px;
height: 18px;
margin-left: -1px;
margin-bottom: -1px;
}
+1, weil dieser mit minimalem Aufwand funktioniert - es muss nicht pixelgenau sein wie bei dem anderen. – Izkata
Das hat mein Problem behoben. Ich hatte genau das gleiche Problem, als ich das gefunden habe. Mein Problem wurde perfekt gelöst. Vielen Dank. – Margate
Working und saubere Lösung, +1. –
Hallo Sie definieren Sie Ihre gridcontainer mit nach Ihren GridItem div
so wie diese
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>
Live-Demo hier 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>
Können Sie mir den Unterschied zwischen dieser und Tobis Antwort sagen? Ich sehe es nicht. – ONOZ
Hier ist eine andere Art und Weise, ohne negativen Margen zu tun: 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;
}
Sehr nützlich für nicht reagierendes Layout :) – gonatee
Ich habe verwendet CCS Grid Layout (Anzeige: grid)
* {
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>
Ich habe mit 'table' betrachten, aber ich wähle für DIVs weil das Netz wirklich nicht für tabellarische Daten. Jedes Quadrat sollte quadratisch bleiben, egal was passiert, und die Zeilen sollten nicht durch überfließenden Inhalt gestreckt werden. – ONOZ