我正在这个网站上工作，作为一个副元素。我一直在尝试让这个页面响应(这是我的第一个响应网页)。到目前为止，除了社交媒体按钮之外，我已经弄清楚了所有内容。我想将它们放在页面的右下角并让它响应但是每次我这样做时当我调整窗口大小时它们移动开始向上移动。我已经包含了我的 HTML 和 CSS。谢谢你的帮助。
我尝试过使用 flexbox、bootstrap 和 grid，但都无法正常工作，我也对使用哪种 CSS 感到困惑。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Giphy Search</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2Zw1T" crossorigin="anonymous">
<link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v4.0">
</script>
<div id="imgLogoDiv">
<img id="imgLogo" src="/img/logo.png" alt="unable to load image">
</div>
<div id="divTxtField">
<input type="text" id="search" placeholder="Search for a gif!">
</div>
<div id="bs-divSearchButton">
<button id="bs-Button" type="button" class="btn btn-dark">Search</button>
</div>
<br>
<div id="GifDisplay">
<img id="gif">
</div>
<div id="socialMediaBottons">
<div id="twitterButton">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large"
data-text="Search for a Gif!" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="fbButton">
<div class="fb-share-button" data-
href="https://www.facebook.com/GIPHY/" data-layout="button" data-size="large"><a target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
class="fb-xfbml-parse-ignore">Share</a></div>
</div>
</div>
<script src="JS/script.js"></script>
</body>
</html>
CSS:
body {
background-image: url(img/background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
#imgLogoDiv {
display: flex;
justify-content: center;
height: auto;
/*height: auto
Not sure if I should keep this since it seems to have to effect.*/
}
#imgLogoDiv #imgLogo {
width: 45%;
height: auto;
}
#divTxtField {
display: flex;
justify-content: center;
position: relative;
top: 20px;
padding-bottom: 1%;
}
#divTxtField #search {
border-radius: 25px;
}
#divTxtField #search:hover {
cursor: auto;
}
#bs-divSearchButton {
display: flex;
justify-content: center;
position: relative;
top: 20px;
padding-bottom: 20px;
}
#bs-divSearchButton #bs-Button:hover {
cursor: pointer;
}
#socialMediaBottons{
display: flex;
justify-content: flex-end;
align-items: flex-end;
height: 50vh;
}
#GifDisplay {
display: flex;
justify-content: center;
}
最佳答案
这个解决方案来自于 Flex 上的 Bootstrap 4 页面 _
按照建议，我将 flex 类 d-flex justify-content-end 添加到 div #socialMediaBottons 并从您的 CSS 中删除了它
现在 HTML 部分看起来像这样:
<div id="socialMediaBottons" class="d-flex justify-content-end">
<div id="twitterButton">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large"
data-text="Search for a Gif!" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="fbButton">
<div class="fb-share-button" data-href="https://www.facebook.com/GIPHY/" data-layout="button" data-size="large"><a
target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
class="fb-xfbml-parse-ignore">Share</a></div>
</div>
</div>
...而相关的 CSS block 仅包含高度属性:
#socialMediaBottons{
height: 50vh;
}
正如您从这张图片中看到的，按钮现在已对齐:
aligned buttons
引用文档:
Bootstrap 4 Flex:https://getbootstrap.com/docs/4.0/utilities/flex/
关于html - 如何将按钮放在页面的底 Angular 并使其响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57794462/