Wie dem Zusammenbruch der Grenzen eine Reihe von <div> - tags mit CSS?

Habe ich ein Gitternetz, das aus DIVS mit fester Breite und einen Rahmen von 1 px. Jetzt, wo die zwei DIV ' s einander berühren, die Grenze wird 2px, offensichtlich.

Wie kann ich nur einen 1px Rand in das ganze Netz?

Dies ist, was ich meine:

Wie dem Zusammenbruch der Grenzen eine Reihe von <div> - tags mit CSS?

http://jsfiddle.net/Before/4uPtj/

HTML:

<div class="gridcontainer">
  <div class="griditem"></div>
  <!-- 15 more times -->
</div>

CSS:

div.gridcontainer
{
  width: 80px;
  line-height: 0;
}

div.griditem
{
  display: inline-block;            
  border: 1px solid black;
  width: 18px;
  height: 18px;
}

Ich habe Bedenken mit table, aber ich wähle für DIVs, da das raster ist wirklich nicht für tabellarische Daten. Jedes Quadrat sollte Platz bleiben, egal wie, und die Zeilen sollten nicht gestreckt werden, durch überquellenden Inhalt.
Für CSS-Layout-Grid-Lösungen finden Sie hier: stackoverflow.com/q/47882924/3597276

InformationsquelleAutor ONOZ | 2012-04-05

7

Könnte border-collapse-Eigenschaft helfen?

Die border-collapse-Eigenschaft wird festgelegt, ob die Tabelle die Grenzen sind zusammengebrochen in einem einfachen Rahmen oder getrennt wird, wie in standard-HTML.

Finden Sie unter: http://www.w3schools.com/cssref/pr_border-collapse.asp
```
table#myTable
{
   border-collapse:collapse;
}
```
- Dies ist der sauberste Ansatz, und in einer einzigen Zeile CSS. Ich änderte die akzeptierte Antwort von Tobi ' s auf dieser.
- Gut, das ist einfach falsch, das funktioniert nicht auf einem raster (die Grenzen zu sehen, dass dies nicht funktionieren) siehe: mdn-border-collapse es funktioniert nur auf <table> finden Sie unter w3 border-collapse definition - Elemente.
- border-collapse funktioniert nur auf Tisch Basis-Elemente und ist deshalb nicht die Antwort auf die eigentliche Frage, die sich speziell auf block-Ebene.
InformationsquelleAutor hallodom
45

Versuchen Sie dies:
```
div.griditem
{
    display: inline-block;            
    border: 1px solid black;
    width: 18px;
    height: 18px;
    margin-left: -1px;
    margin-bottom: -1px;
}
```
- +1, da funktioniert das mit minimalem Aufwand - kein Grund zur pixel-perfekt, wie mit dem anderen.
- Dies nur Feste mein problem. Ich hatte genau das gleiche Problem, wenn ich das gefunden. Löste mein problem perfekt. Ich danke Ihnen sehr.
- Sehr gut, danke! Ich habe zuvor haderte mit pseudo-Elemente, box-Schatten und Konturen. Das ist super-einfach.
- nicht erforderlich ist eine <table>, +1
InformationsquelleAutor Tobi

17

Hi du definieren Sie Ihre gridcontainer mit nach Ihren griditem div

als 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/

+1 besser als die akzeptierte Antwort, da Sie nicht mit negativen Margen, die zu unvorhersehbaren Ergebnissen in älteren Browsern.
+1 das ist wirklich ein guter.
Schöne Lösung!
Warum line-height: 0?

InformationsquelleAutor Rohit Azad

6

Da der Titel wahrscheinlich viele ppl wird am Ende hier auf der Suche nach der Lösung für ein eigentlichen css grid layout problem wie ich. Für Sie hier ist eine Problemumgehung die Verwendung einer Kombination von grid-gap und box-shadow

CSS:

.bar {
    max-width: 200px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1px;
}
.foo {
  box-shadow: 0 0 0 1px #000;
}

HTML:

<div class="bar">
    <div class="foo">1</div>
    <div class="foo">2</div>
    <div class="foo">3</div>
    <div class="foo">4</div>
    <div class="foo">5</div>
    <div class="foo">6</div>
    <div class="foo">7</div>
    <div class="foo">8</div>
    <div class="foo">9</div>
</div>

Interessant! Ich glaube nicht, dass "display: grid" gab es, wenn ich die Frage gestellt habe wieder in 2012. Ich denke, das ist eine modernere Lösung.
erstaunlich, ich danke Ihnen sehr.

InformationsquelleAutor Laszlo

3

Habe ich verwendet CCS-Grid-Layout (display: grid)

CSS:

* {
  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 {
	display: grid;
	background-color: #000;
	border: 1px solid #000;
	grid-gap: 1px;
	justify-self: center; 
	max-width: 282px;
	height: auto;
	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) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, 1fr);
		max-width: 563px;
	}
}

@media only screen and (min-width: 1024px) {
	
	.grid {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		max-width: 1124px;
	}
}

HTML:

<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>

InformationsquelleAutor Mary Pieroszkiewicz

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 sagen, den Unterschied zwischen diesem und Tobi ' s Antwort? Ich scheitern Sie zu sehen.

InformationsquelleAutor Chetan Durafe

1

Hier ist ein weiterer Weg, es zu tun, ohne negative margins: 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-responsive layout 🙂

InformationsquelleAutor Michael Thompson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.