一番下のdivを先頭に移動する方法

Question

profile-options divの移動には助けが必要です。 ここに画像がありますので、私の言いたいことを教えてください。画像の下にコードがあります。

Picture

index.htmlを

<div id="page"> 
    <div id="content"> 
     <div id="info"> 
      <div id="profile" name="picture"> 
       <img src="https://scontent-frt3-1.xx.fbcdn.net/v/t1.0-9/17021559_243918039403378_4935600322061460678_n.jpg?oh=aa472121820d78b6116c91d47557bce6&oe=59738E5C" name="profile" /> 
       <img src="https://scontent-frt3-1.xx.fbcdn.net/v/t1.0-9/17098689_244217759373406_3036940291705168436_n.jpg?oh=5f7b2ead37fdec3c2b13fa60fe431a0c&oe=5924FEA8" name="frontpage" /> 
      </div> 
      <div id="menu" name="profile-name"> 
       Random Guy 
      </div> 
      <div id="menu" name="profile-options"> 
       Hi 
      </div> 
      <div id="personal"> 
       <ul> 
        <li>Email: nurudin.imsirovic@gmail.com</li> 
        <li>Password: *****************************</li> 
        <li>Country: Bosnia & Herzegovina</li> 
        <li>City: not choosen</li> 
        <li>Address: not choosen</li> 
        <li>Phone number: not choosen</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

のstyle.css

#page #content #info #profile[name="picture"] 
{ 
    width:700px; 
} 

#page #content #info #profile[name="picture"] img[name="profile"] 
{ 
    width:128px; 
    height:128px; 
} 

#page #content #info #profile[name="picture"] img[name="frontpage"] 
{ 
    width:572px; 
    height:128px; 
    margin-left:-4px; 
} 

#page #content #info #personal 
{ 
    width:698px; 
} 

#page #content #info #menu[name="profile-name"] 
{ 
    background-color:#d8d8d8; 
    width:116px; 
    height:48px; 
    max-width:116px; 
    max-height:48px; 
    border:0px; 
    padding:6px; 
    word-wrap:break-word; 
    margin-top:-5px; 
} 

#page #content #info #menu[name="profile-options"] 
{ 
    background-color:#d8d8d8; 
    width:572px; 
    height:48px; 
    border:0px; 
    margin-top:-5px; 
} 

どのように私は、任意の位置指令やマージンを使用せずにこれを達成することができ、私は左試してみました：0PXとトップ： 0pxでしたが動作しませんでした。

Answer 1

#menu { 
    display: inline-block; 
} 

https://jsfiddle.net/zkmuxayq/

Answer 2

ただ、「フロート：左/右」を追加し、それらの両方に、その幅の合計が100％以下であることを確認してください。

.div { 
 
position:relative; 
 
float:left; 
 
height:50px; 
 
} 
 

 
.left { 
 
width:20%; 
 
background-color:grey; 
 
} 
 

 
.right { 
 
width:80%; 
 
background-color:black; 
 
}

<div class="div left"></div> 
 
<div class="div right"></div>

Answer 3

あなたはいくつかの問題があります。 まず、IDは一意でなければならず、2つの「メニュー」IDがあります。 あなたが望むものを実現するには、2つのdivに "display：inline-block"を設定する必要があります。

Answer 4

デフォルトでのdivのはblock要素なので - 彼らが使用してみて、完全な利用できる幅を占有します意味 -

#menu { 
    display: inline-block; 
} 

divは現在、レンダリングされるインラインつまり要素の流れが妨げられることはありませんが、それでもとして扱われますブロック要素。

Answer 5

profile-nameの左に浮動小数点を追加する必要があります。現在、その要素を調べると、画面の全幅を占めていることがわかります。フロート左のプロパティを追加すること

#page #content #info #menu[name="profile-name"] 
     { 
      background-color:#d8d8d8; 
      width:116px; 
      height:48px; 
      max-width:116px; 
      max-height:48px; 
      border:0px; 
      padding:6px; 
      word-wrap:break-word; 
      margin-top:-5px; 
      float: left 
     } 

Answer 6

試してみてください。

#page #content #info #menu[name="profile-name"] 
{ 
    background-color:#d8d8d8; 
    width:116px; 
    height:48px; 
    max-width:116px; 
    max-height:48px; 
    border:0px; 
    padding:6px; 
    word-wrap:break-word; 
    margin-top:-5px; 
    float: left; 
}