我的形象不会动起来？

Question

我有两张图片。一个工作得很好，我使用了浮动，我称之为 div 'flowers.' 但是，第二个图像不想移动。我称 div 'barbed.' Barbed 在左边，所以我将它浮动到右边，效果很好。问题是让它升得更高。我试过使用 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

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

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

话虽这么说，这里的布局存在很多明显的问题。首先是你有很多不必要的标记。您不需要将所有内容都包装在 div 中，您只需将 class 添加到元素并从那里定位和设置样式即可。接下来，您可以从 .barbed 和 .flowers div 中删除浮点数，因为您使用的是绝对定位，因此您的浮点数根本不做任何事情。您可能还想考虑将元素包装在 div 中并将 div 定位到相对位置，然后将它们绝对定位在 div 中，而不是将它们绝对定位在 [=35= 中].接下来，如果您将浏览器 window 调整为更小的尺寸，您会发现您的布局很可能会中断。因此，当有人在移动浏览器上打开它时，您会遇到问题。如果我是你，我会尝试下面的方法。我只是很快地输入了这个，并没有真正测试太多，但我认为这应该是一个很好的起点，让你看看你将来可能运行遇到什么问题。

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

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

我的形象不会动起来？

My image will not move up?

html

css

image

positioning