Comment diviser un div en deux colonnes lorsque nous divisons une table?

Question

En fait, je voulais les deux grilles dans un div, je veux dire une grille dans la droite, l'autre dans la gauche ..... mais pour l'instant la grille apparaît vers le bas. C'est la même chose que vous diviser dans une table avec deux rangées !! même chose que je dois diviser un div et ajouter deux grilles côte à côte. J'espère que vous comprendrez mon point. En vous remerciant tous d'avance pour votre support et vos réponses impressionnants

Answer 1

Créer deux divs dans votre principale div

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

Avec CSS, fixer chacun du bon côté

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

Answer 2

Tout dépend de la conception que vous voulez réaliser pour cette table. Il existe plusieurs approches, chacune d'entre elles donnant des résultats légèrement différents.

1. Vous pouvez modifier la propriété CSS display sur les divs. La meilleure valeur à utiliser serait table-cell; Cependant, cette valeur n'est prise en charge par aucune version d'IE. Vous pouvez également essayer les valeurs inline ou inline-block.
2. Vous pouvez faire flotter les divs vers la gauche dans leur conteneur.
3. Vous pouvez utiliser le positionnement absolu ou relatif des divs dans leur conteneur; Cependant, cette approche ne fonctionne pas bien avec les conceptions fluides.
4. Vous pouvez passer à span.

Answer 3

Utilisez une table. Il est plus logique d'utiliser des tables où elles sont plus efficaces. Des choses comme ça sont ce que les tables sont faites pour, et div n'est pas fait pour.

Answer 4

Ceci est une extension de la réponse acceptée d'Omar Abid. J'ai commencé avec cela et j'ai dû apporter d'autres modifications pour que cela fonctionne dans mon exemple de la question posée.

J'ai fait ce travail avec des noms de classe au lieu d'ID afin que je puisse appeler le même CSS dans plusieurs instances. Cela m'a donné la possibilité de simuler deux cellules de taille égale. Dans mon exemple, j'ai fixé la taille fixe avec ems afin qu'il puisse préserver son apparence à travers une gamme de tailles de navigateur de table et de bureau (dans mon CSS mobile, j'ai une stratégie différente).

Pour aligner une image dans la div gauche, j'ai dû faire un bloc séparé (le dernier dans le code CSS).

Cela devrait répondre à la question dans la plupart des cas

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