Mam tutaj dwa divy:
<div style="display:table-cell" id="div1">
content
</div>
<div style="display:table-cell" id="div2">
content
</div>
Czy istnieje sposób na zrobienie odstępu między tymi dwoma elementami div (które mają display:table-cell
)?
html
css
css-tables
System-x32z
źródło
źródło
position: relative
.position: relative
natable-*-group
,table-row
,table-column
,table-cell
itable-caption
elementów jest nieokreślona.border-right: 10px solid #FFF
. Działało to dobrze podczas projektowania menu rozwijanego CSS, gdy chciałem trochę odstępu międzytable-cell
elementami.Jeśli to możliwe, używaj przezroczystych ramek.
JSFiddle Demo
https://jsfiddle.net/74q3na62/
HTML
CSS
Wyjaśnienie
Możesz użyć tej
border-spacing
właściwości, jak sugeruje zaakceptowana odpowiedź, ale to nie tylko generuje przestrzeń między komórkami tabeli, ale także między komórkami tabeli a kontenerem tabeli. To może być niepożądane.Jeśli nie potrzebujesz widocznych obramowań komórek tabeli, powinieneś użyć
transparent
obramowań do wygenerowania marginesów komórek. Przezroczyste obramowania wymagają ustawienia,background-clip: padding-box;
ponieważ w przeciwnym razie kolor tła komórek tabeli jest wyświetlany na obramowaniu.Przezroczyste obramowanie i klip w tle są obsługiwane od IE9 w górę (i wszystkich innych nowoczesnych przeglądarek). Jeśli potrzebujesz zgodności z IE8 lub nie potrzebujesz rzeczywistej przezroczystej przestrzeni, możesz po prostu ustawić biały kolor obramowania i pominąć
background-clip
.źródło
źródło
Cóż, powyższe działa, oto moje rozwiązanie, które wymaga trochę mniej znaczników i jest bardziej elastyczne.
źródło
Utwórz nowy element div o dowolnej nazwie (użyję tylko podziału tabeli) i nadaj mu szerokość, bez dodawania do niego zawartości, umieszczając go między niezbędnymi elementami div, które należy rozdzielić.
Możesz dodać dowolną szerokość, jaką uznasz za potrzebną. Użyłem tylko 0,6%, ponieważ właśnie tego potrzebowałem, kiedy musiałem to zrobić.
źródło