Question

我需要帮助移动profile-options div。这是一张图片，所以我可以告诉你我的意思，代码在图片下方提供。

的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和top：0px但不起作用。

Answer 1

尝试添加float 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;
}

Answer 2

#menu {
  display: inline-block;
}

https://jsfiddle.net/zkmuxayq/

Answer 3

只需在其中添加'float：left / right'，并确保其宽度总和不大于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 4

你有一些问题。首先，ID必须是唯一的，并且您有2个“菜单”ID。要实现您想要的效果，您必须将“display：inline-block”设置为2个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
        }

如何将底部div移到顶部div的前面

5 个答案: