Astuce Css pour conjoindre divs

Question

Existe-t-il un moyen de réunir trois divs ensemble?

Hello 
<div class="mainContainer"> 
    <div class="LeftDiv"></div> 
    <div class="CenterDiv"> 
     <input id="txtTest" type="text"/> 
    </div> 
    <div class="RightDiv"></div> 
</div> 
World! 

ce que nous avons besoin est de présenter le code de cette façon:

Hello<*LeftDiv*><*CenterDiv with the textbox*><*RightDiv*>World

J'ai essayé d'utiliser float: left sur LeftDiv, CenterDiv et RightDiv mais affecte également le css mainContainer. J'ai aussi besoin de régler la hauteur et la largeur de LeftDiv et RightDiv sur le CSS mais je ne peux pas le faire sans le flotteur.

Merci d'avance.

Editer: Ajout d'une question - quand LeftDiv, CenterDiv et RightDiv sont flottants - à gauche, pourquoi MainContainer est-il affecté? Je veux juste avoir les trois divs internes siamoises sans affecter le comportement de div parent ...

---

divs avec affichage: inline-block ne fonctionnent pas comme prévu. Mais les travées font.

Hello 
<span class="mainContainer"> 
    <span class="LeftDiv"></span><span class="CenterDiv"> 
     <input id="txtTest" type="text"/> 
    </span><span class="RightDiv"></span> 
</span> 
World! 

Et les travées ne devraient pas avoir un espace entre eux parce que la plupart des navigateurs ne les rendre avec un espace blanc entre ... =)

(répondues pour référence future)

Answer 1

vous pouvez utiliser en ligne d'affichage -bloc, de cette façon il n'y aura pas de « retour à la ligne » avant divs

div.mainContainer, div.mainContainer div 
{ 
    display:-moz-inline-stack; /* for gecko */ 
    display: inline-block; 
} 

essaient goog-inline-block classe définie dans goog/demos/css/common.css de la bibliothèque de fermeture - soi-disant crique Tous les principaux navigateurs

Answer 2

Vous pouvez faire flotter tous les divs enfants de "mainContainer" à gauche comme ci-dessous, puis vous pouvez définir les exigences de hauteur et de largeur à votre guise.

#mainContainer > div 
{ 
    float:left; 
} 
#LeftDiv 
{ 
    height:100px; 
    width:100px; 
    background-color:red; 
} 
#RightDiv 
{ 
    height:100px; 
    width:100px; 
    background-color:green; 
} 

Hmm, et si vos conteneurs gauche et droite ne sont destinés à une image d'arrière-plan, vous pourriez envisager de simplement rendre une image et l'appliquer à mainContainer,

#mainContainer 
{ 
    background-image:url(theimage.jpg); 
    padding-left:100px; /*The amount of the image to the left */ 
    padding-right:100px; /* the amount of the image to the right. */ 
}