はどのように私は下に、左/右

Question

に別のdiv内の2つのdivを揃えることができ、私はこのコードを持っている

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

私がやっていることは、 div "head"の左下にdiv "menu"、div "head"の右下にdiv "search"と表示されます。

私はそれが完全にメニューを揃え"menu"と"head"のための位置とボトム値を使用しますが、私は"search"と同じことをしようとすると、それは"menu"の上にそれをスロー

は少しオフセット。ここで

は絵の一例である https://i.stack.imgur.com/KBUxw.png （「メニュー」のdiv整列正しくなく、左に整列し、少し高い「メニュー」の上に「検索」）位置と下退治

浮動小数点数だけを使用すると、それぞれの辺が互いにインラインで配置されますが、親divの一番下には配置されません。

私はそれらを側面に揃えるようにしていますが、 "検索" divはまだ "メニュー"よりも高く（下部ではありません）。

これは、入力検索フィールドを含むフォームが含まれている可能性があります。

EDIT1

：私はこの問題は、私が実際に「検索」の下にある検索ボックスを整列する必要があるということであることが判明しました。 0PX ;.：どちらもない下の私は、これは

.searchbox { 
    vertical-align:bottom; 
} 

を.searchboxするために追加しようとしましたが、これは動作しませんし、

EDIT2

：私は問題が実際に何であったかが分かったので、私は解決策を見つけました。入力ボックスに割り当てられたクラスにこのコードを追加する必要がありました。

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

これで完璧です。私はボックスを除いて "検索"の中に他のコンテンツを持っていないので、今度は入力ボックスが "頭"に整列しているので、divの "検索"を整列させることはあまりにも大事なことではありません。みんな、ありがとう！

Answer 1

私はこれをやってみました、ChromeとFirefoxで私のために働くように見えました。また、最後の2番目から最後の閉じているdivを修正する必要があります。

Codepen：下/左/右スタイリングで役立った別のスレッドへhttps://codepen.io/jhhboyle/pen/BZQVvO

リンク： 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

position:absolute;で別のdivを作成し、両方の子divをその内部に配置します。

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>

これは、同じ

を取得する別の方法です2nd way to do this

3rd way to do this

Answer 3

これを追加します。

.menu{left:0;} 

.search{right:0;} 

Answer 4

0123を使用できますを使用してdivを左下と右下に揃えます。

.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

CSSファイルでこれを試してみてください：共有するが、これは厄介なようで、別のdivを追加するための

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