Question

我有两张照片。一个工作得很好，我使用浮动，我称之为div'花。但是，第二张图像不想移动。我把那个div称为“带刺”。左边是带刺的，所以我把它漂到了右边，工作得很好。问题是让它更高。我尝试过使用position：absolute，position：relative然后使用bottom和top。它不想动。我也试过边距，填充，并使用z-index思考可能其他边缘阻碍了。没有。

这是一个关于它的外观的屏幕截图：

这是html代码：

    <!DOCTYPE html>
    <html>
    <head>
    <title>question reality.</title>
    <link rel="stylesheet" type="text/css" href="intro-page.css">
    </head>

    <body>

        <div class="container">
            <center>
                <img src="https://i.imgur.com/10iUAyi.gif">
            </center>
        </div>

        <div class="text-center">
            <div class="light">
                <button>
                    <a href="http://google.com">Light</a>
                </button>
            </div>
            </button>
            <div class="dark">
                <button>
                    <a href="http://google.com">Dark</a>
                </button>
            </div>
        </div>


        <div class="flowers">
            <img src="https://i.imgur.com/rOLqQ48.jpg">
        </div>

        <div class="barbed">
            <img src="https://i.imgur.com/SukIIZ6.jpg">
        </div>

    </body>
    </html>

这是CSS：

body{
background-color:black;
}


.text-center{
margin-left:580px;

}

.container{
padding-top:200px;
}

.light a{
color:black;
text-decoration:none;
}

.light a:hover{
background-color:black;
color:white;
padding:5px;
}

.light button{
background-color:white;
color:black;
font-size: 30px;
border-radius: 12px;
float:left;

}

.dark a{
color:white;
text-decoration:none;
}

.dark a:hover{
background-color:white;
color:black;
padding:2px;
}

.dark button{
background-color:black;
color:white;
font-size:30px;
border-radius:12px;
float:left;
margin-left:15px;

}

.dark{
text-align:center;
}

.light{
text-align:center;
}

.flowers{
float:left;
width:100%;
position:absolute;
bottom:100px;
left:200px;
}

.barbed{
float:right;
width:100%
position:absolute;
bottom:300px;

}

Answer 1

首先，你在width:100% css .barbed之后遗漏了一个分号，这就是为什么你无法移动div的原因。如果你添加分号，你将能够根据自己的喜好移动div，它应该回答你的问题。

.barbed{
float:right;
width:100%;
position:absolute;
bottom:300px;
}

话虽如此，你在这里的布局有很多明显的问题。首先是你有很多不必要的标记。你不需要在div中包装所有东西，你只需要在元素中添加一个类，并从那里定位它的样式。接下来，您可以删除.barbed和.flowers div中的浮点数，因为您使用的是绝对定位，因此您的浮点数根本不执行任何操作。您可能还想考虑将div中的元素包装起来并将div定位到relative，然后将它们绝对放在div中，而不是将它们绝对放在窗口中。接下来，如果您将浏览器窗口调整为较小的尺寸，则可以看到您的布局很可能会破坏。因此，当有人在移动浏览器上打开此内容时，您会遇到问题。如果我是你，我会尝试类似以下的东西。我只是快速输入它并没有真正测试它，但我认为它应该是一个很好的起点，让你看看你将来会遇到什么问题。

＆＃13;

body{
    background:black;
    margin:0;
    padding:0;
}
.container{
    position:relative;
    height:100vh;
    min-height:400px;
}
.container-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
}
.container-content img{
    display:block;
}
a.light{
    background-color:white;
    color:black;
    font-size: 30px;
    border-radius: 12px;
    text-decoration:none;
    display:inline-block;
    margin:10px;
}
a.dark{
    background-color:black;
    color:white;
    font-size:30px;
    border-radius:12px;
    text-decoration:none;
    display:inline-block;
    margin:10px;
}
.flowers{
    position:absolute;
    top:20px;
    left:20px;
    width:30%;
}
.barbed{
    position:absolute;
    bottom:20px;
    right:20px;
    width:30%;
}

＆＃13;

<div class="container">
    <img class="flowers" src="https://i.imgur.com/rOLqQ48.jpg"/>
    <img class="barbed" src="https://i.imgur.com/SukIIZ6.jpg"/>
    <div class="container-content">
        <img src="https://i.imgur.com/10iUAyi.gif"/>
        <a class="light" href="#">Light</a>
        <a class="dark" href="#">Dark</a>
    </div>
</div>

＆＃13;

我的图片不会向上移动？

1 个答案: