如何将底部div移到顶端的底部

Question

我需要帮助移动配置文件选项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; 
} 

我怎样才能做到这一点不使用任何位置命令或保证金，我试过左：0像素和顶部： 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

你有一些问题。 首先，ids必须是唯一的，你有2个“菜单”ID。 为了实现你想要的，你必须设置“display：inline-block”为2个div。

Answer 4

由于div的默认情况下是block元素 - 这意味着他们将占据全部可用宽度，请尝试使用 -

#menu { 
    display: inline-block; 
} 

的div现在呈现内嵌即不破坏元素的流量，但仍然会被视为一个块元素。

Answer 5

你需要添加一个float到配置文件名。目前，如果您检查该元素，则可以看到它占据了屏幕的整个宽度。

#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

尝试添加浮动left属性：

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