Comment puis-je aligner 2 divs dans un autre div au fond et à gauche/droite

Question

J'ai ce code

HTML

<div class="head"> 
    <div class="menu"> 
    </div> 
    <div class="search"> 
    </div> 
    </div> 

CSS

.head { 
    height:110px; 
    position:relative; 
} 
.menu { 
    float:left; 
    position:absolute; 
    bottom:0px; 
} 
.search { 
    float:right; 
    position:absolute; 
    bottom:0px; 
} 

Ce que j'essaie de faire est de mettre le div "menu" en bas à gauche du div "head" et le div "search" en bas à droite du div "head".

Lorsque j'utilise la position et les valeurs du bas pour "menu" et "head" il aligne le menu parfaitement, mais lorsque je tente la même chose avec "search" il jette sur le dessus de "menu" décalage un peu.

Voici un exemple d'image https://i.stack.imgur.com/KBUxw.png (le « menu » div aligne correctement, mais « recherche » aligne à gauche et au-dessus du un peu plus haut « menu »)

Se débarrasser de la position et le bas Les valeurs et en utilisant simplement float aligneront chacun à leurs côtés respectifs en ligne les uns avec les autres, mais il ne les mettra pas sur le fond de la div parent.

J'ai jusqu'à aligner sur les côtés, mais le div "search" est toujours plus haut que "menu" (et pas en bas).

Cela peut être dû au fait qu'il contient un formulaire avec un champ de recherche d'entrée.

Edit1

: Je l'ai découvert que le problème est que je dois aligner effectivement la boîte de recherche au bas de « recherche ». J'ai essayé d'ajouter ceci à .searchbox

.searchbox { 
    vertical-align:bottom; 
} 

Mais ceci ne fonctionne pas, et le bas: 0px ;.

Edit2

: J'ai trouvé la solution depuis que j'ai découvert ce que le problème était en fait. J'ai dû ajouter ce code à une classe affectée à la boîte d'entrée

position: absolute; 
right: 0; 
bottom: 0; 

Et maintenant, ça fonctionne parfaitement. Je n'ai aucun autre contenu à l'intérieur de "recherche" excepté la boîte ainsi alignant la div "recherche" n'est pas trop grand d'une affaire puisque maintenant la boîte d'entrée s'aligne sur "tête". Merci tout le monde!

Answer 1

J'ai essayé de faire cela et il semblait travailler pour moi dans Chrome et Firefox. De plus, votre séparateur avant-dernier doit être corrigé.

Codepen: https://codepen.io/jhhboyle/pen/BZQVvO

Lien vers un autre thread qui a été utile avec le fond/droite/gauche style: Put text at bottom of div

HTML:

<div class="head"> 
    <div class="menu"> 
     Content 
    </div> 
    <div class="search"> 
     COntent 
    </div> 
</div> 

CSS:

.head { 
    height:110px; 
    position:relative; 
    background-color:green; 
} 
.menu { 
    font-size:18px; 
    position:absolute; 
    bottom:0px; 
    background-color:red; 
} 
.search { 
    position:absolute; 
    bottom:0px; 
    right:0px; 
    background-color:blue; 
} 

Answer 2

Créez une autre div avec position:absolute; et placez-y les deux div enfants.

css

.box { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    border-top:1px solid; 
} 
    .menu { 
    font-size: 18px; 
    float: left; 
    margin-left: 10px; 
} 

.search { 
    float: right; 
    margin-right: 10px; 
} 

HTML

<div class="box"> 
    <div class="menu"> 
      hello 
    </div> 
    <div class="search"> 
      bye 
    </div> 
</div> 

.head { 
 
    height: 110px; 
 
    border-radius: 2px 2px 0px 0px; 
 
    position: relative; 
 
    border: 1px solid; 
 
} 
 

 
.box { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    border-top:1px solid; 
 
} 
 

 
.menu { 
 
    font-size: 18px; 
 
    float: left; 
 
    margin-left: 10px; 
 
} 
 

 
.search { 
 
    float: right; 
 
    margin-right: 10px; 
 
}

<div class="head"> 
 
    <div class="box"> 
 
    <div class="menu"> 
 
     hello 
 
    </div> 
 
    <div class="search"> 
 
     bye 
 
    </div> 
 
    </div> 
 
</div>

C'est une autre façon d'obtenir le même

2nd way to do this

3rd way to do this

Answer 3

Ajouter ceci:

.menu{left:0;} 

.search{right:0;} 

Answer 4

Vous pouvez utiliser display: flex; pour aligner les divs en bas à gauche et à droite.

.head { 
 
    height: 110px; 
 
    position: relative; 
 
    display: flex; 
 
    align-items: flex-end; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
} 
 
.menu { 
 
    font-size: 18px; 
 
} 
 

 
.menu, .search { 
 
    flex: 0 0 50%; 
 
    max-width: 50%; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
}

<div class="head"> 
 
    <div class="menu"> 
 
    Menu 
 
    </div> 
 
    <div class="search"> 
 
    Search 
 
    </div> 
 
</div>

Answer 5

A div with two div's align left and right bottom

Essayez ceci dans le fichier CSS:

.head { 
    height:110px; 
    position:relative; 
} 
.menu { 
    float:left; 
    position:absolute; 
    bottom:0px; 
} 
.search { 
right:0px; 
    float:right; 
    position:absolute; 
    bottom:0px; 
}