Wie teilt man ein div in zwei Spalten auf, während wir eine Tabelle teilen?

Question

Eigentlich wollte ich die zwei Gitter in einem div, ich meine ein Gitter in rechts, andere in der linken ..... aber für jetzt das Gitter erscheint unten. Es ist dasselbe wie Sie in einer Tabelle mit zwei Reihen aufgeteilt haben !! Genauso muss ich ein Div aufteilen und zwei Gitter nebeneinander hinzufügen. Ich hoffe, Sie verstehen, was ich meine. Ich danke Ihnen allen im Voraus für Ihre großartige Unterstützung und Antworten

Answer 1

Erstellen Sie zwei Divs in Ihrem Haupt-div

<div id="main"> 
<div id="left"></div> 
<div id="right"></div> 
</div> 

Mit CSS beheben jedes auf der richtigen Seite

#left { float:left } 
#right { float:right } 

Answer 2

Es hängt alles von dem Design, das Sie für diese Tabelle erreichen möchten. Es gibt mehrere Ansätze, die jeweils leicht unterschiedliche Ergebnisse liefern.

1. Sie können die display CSS-Eigenschaft auf den Divs ändern. Der beste zu verwendende Wert wäre table-cell; Dieser Wert wird jedoch von keiner IE-Version unterstützt. Sie können auch inline oder inline-block Werte versuchen.
2. Sie können die Divs in ihrem Container nach links schweben lassen.
3. Sie können absolute oder relative Positionierung der Divs in ihrem Container verwenden; Dieser Ansatz funktioniert jedoch nicht gut mit Fluiddesigns.
4. Sie können zu span wechseln.

Answer 3

einen Tisch verwenden. Es macht mehr Sinn, Tabellen dort zu verwenden, wo sie effizienter sind. Dinge wie das sind, wofür Tische gemacht werden, und Div ist nicht dafür gemacht.

Answer 4

Dies ist eine Erweiterung der angenommenen Antwort von Omar Abid. Ich fing damit an und musste weitere Änderungen vornehmen, damit es in meinem Beispiel der angegebenen Frage funktionieren würde.

Ich machte dies mit Klassennamen anstelle von IDs arbeiten, so dass ich das gleiche CSS in mehreren Instanzen aufrufen konnte. Dies gab mir die Möglichkeit, zwei Zellen gleicher Größe zu simulieren. In meinem Beispiel habe ich eine feste Größe mit ems festgelegt, so dass die Darstellung über eine Reihe von Tabellen- und Desktopbrowsergrößen hinweg erhalten bleibt (in meinem mobilen CSS habe ich eine andere Strategie).

Um ein Bild im linken div auszurichten, musste ich einen separaten Block (der letzte im CSS-Code) machen.

Dies sollte die Frage in den meisten Fällen Adresse

<div class="BrandContainer"> 
     <div class="BrandContainerTitle"> 
      <h1>...</h1> 
     </div> 
     <div class="BrandContainerImage"> 
      <img alt="Demo image" src="..." /> 
     </div> 
    </div> 

CSS:

.BrandContainer 
{ 
    width: 22em; 
} 
.BrandContainerTitle 
{ 
    vertical-align: top; 
    float: right; 
    width: 10em; 
} 
.BrandContainerImage 
{ 
    vertical-align: top; 
    float: left; 
} 
.BrandContainerImage img 
{ 
    width: 10em; 
}