Ho qui due div:
<div style="display:table-cell" id="div1">
content
</div>
<div style="display:table-cell" id="div2">
content
</div>
C'è un modo per fare spazio tra questi due div (che hanno display:table-cell
)?
Ho qui due div:
<div style="display:table-cell" id="div1">
content
</div>
<div style="display:table-cell" id="div2">
content
</div>
C'è un modo per fare spazio tra questi due div (che hanno display:table-cell
)?
Risposte:
Puoi usare la border-spacing
proprietà:
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;
}
Qualche altra opzione?
Beh , non proprio.
Perché?
margin
la proprietà non è applicabile agli display: table-cell
elementi.padding
la proprietà non crea spazio tra i bordi delle celle.float
proprietà distrugge il comportamento atteso di table-cell
elementi che possono essere alti quanto il loro elemento genitore.position: relative
su table-*-group
, table-row
, table-column
, table-cell
, e table-caption
elementi è indefinito.
border-right: 10px solid #FFF
. Questo ha funzionato bene per me durante la progettazione di un menu a discesa CSS quando volevo uno spazio tra gli table-cell
elementi.
Se possibile, usa bordi trasparenti.
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;
}
È possibile utilizzare la border-spacing
proprietà, come suggerisce la risposta accettata, ma ciò non solo genera spazio tra le celle della tabella ma anche tra le celle della tabella e il contenitore della tabella. Questo potrebbe essere indesiderato.
Se non hai bisogno di bordi visibili sulle celle della tabella, dovresti quindi utilizzare i transparent
bordi per generare i margini delle celle. I bordi trasparenti richiedono un'impostazione background-clip: padding-box;
perché altrimenti il colore di sfondo delle celle della tabella viene visualizzato sul bordo.
I bordi trasparenti e la clip di sfondo sono supportati in IE9 e versioni successive (e tutti gli altri browser moderni). Se hai bisogno della compatibilità con IE8 o non hai bisogno di uno spazio trasparente effettivo, puoi semplicemente impostare un colore del bordo bianco e lasciare background-clip
fuori.
<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>
Bene, quanto sopra funziona, ecco la mia soluzione che richiede un po 'meno di markup ed è più flessibile.
.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>
Crea un nuovo div con qualsiasi nome (userò solo table-split) e dagli una larghezza, senza aggiungere contenuto, mentre lo metti tra i div necessari che devono essere separati.
Puoi aggiungere la larghezza che ritieni necessaria. Ho usato solo lo 0,6% perché è ciò di cui avevo bisogno quando dovevo farlo.
.table-split {
display: table-cell;
width: 0.6%
}
<div class="table-split"></div>
position: relative
.