wake-up-neo.com

Abstand zwischen divs - Tabellenzelle anzeigen

Ich habe hier zwei divs:

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

Gibt es eine Möglichkeit, zwischen diesen beiden Divs (die display:table-cell)?

htmlcsscss-tables
93
System-x32z

Sie können border-spacing Eigenschaft:

HTML: 

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

CSS: 

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

JSBin Demo

Noch eine Option?

Naja, eigentlich nicht.

Warum?

  • margin property gilt nicht to display: table-cell Elemente.
  • Die Eigenschaft padding erstellt keinen Abstand zwischen den Rändern der Zellen.
  • Die Eigenschaft float zerstört das erwartete Verhalten von table-cell Elemente, die so groß sein können wie das übergeordnete Element.
185
Hashem Qolami

Verwenden Sie möglichst transparente Ränder.

JSFiddle Demo

https://jsfiddle.net/74q3na62/

[~ # ~] html [~ # ~] 

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

[~ # ~] CSS [~ # ~] 

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

Erläuterung

Sie könnten das border-spacing -Eigenschaft, generiert jedoch nicht nur Speicherplatz zwischen den Tabellenzellen, sondern auch zwischen den Tabellenzellen und dem Tabellencontainer.

Wenn Sie keine sichtbaren Ränder für Ihre Tabellenzellen benötigen, sollten Sie daher transparent Ränder verwenden, um Zellränder zu generieren. Transparente Ränder erfordern das Setzen von background-clip: padding-box; weil sonst die Hintergrundfarbe der Tabellenzellen am Rand angezeigt wird.

Transparente Rahmen und Hintergrundclips werden ab IE9 (und allen anderen modernen Browsern) unterstützt. Wenn Sie IE8-Kompatibilität benötigen oder keinen tatsächlichen transparenten Platz benötigen, können Sie einfach eine weiße Rahmenfarbe festlegen und das background-clip aus.

17
Max
<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>
0
jalalBK

Nun, obiges funktioniert, hier ist meine Lösung, die etwas weniger Markup erfordert und flexibler ist.

.cells {
  display: inline-block;
  float: left;
  padding: 1px;
}
.cells>.content {
  background: #EEE;
  display: table-cell;
  float: left;
  padding: 3px;
  vertical-align: middle;
}
<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>
0
Gareth Clarke