position:relative
bottom: 0
对我不起作用。我需要将按钮放在井底和中央。我还必须将 facebook 共享链接放在它的左侧,但直到我不把它放在右边,我现在无法计划 facebook 链接。
下面是我的代码:
$(document).ready(function() {
var content="";
$("#click").click(function() {
$.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
content=key[0].content + "<p>— " + key[0].title + "</p>";
$("#quote-form").html(content);
console.log(content);
});
$("#quote-form").css({"font-family":"lucida console", "font-size": "20px","color":"rgb(255,255,150)"});
});
});
.position-message{
margin-left: 25%;
margin-right:25%;
margin-top:10%;
}
.background{
background-color: rgba(245,245,245,0.2);
border-radius:10%;
padding-bottom: 10%;
}
#button-shape{
position:relative;
bottom: 0;
padding-left:48%;
padding-right: 48%;
}
.quote-shape{
border-radius: 10%;
width: absolute;
height: absolute;
}
#page{
margin-left: 5%;
margin-right: 5%;
margin-top:2%;
margin-bottom:2%;
}
#page-background{
background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}
#share {
height:30px;
width: 80px;
position:
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<Title>Click to get quotes</Title>
</head>
<body id="page-background">
<div class="well background" id="page">
<div class="container-fluid">
<div id="quote" class="position-message">
<span><p id="quote-form"></p></span>
</div>
<div class="row" id="button-shape">
<div id="share" class="col">
<!--<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
<i class="fa fa-facebook-official"></i> Share
</a> -->
</div>
<div class="col">
<button type="button" id="click button-shape" class="btn btn-outline-secondary btn-circle"><i class="fa fa-refresh fa-2x"></i>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
除非您之前将 bottom
设置为另一个值,否则使用 position: relative
和 bottom: 0
不会有任何视觉效果效果。
有多种方法可以解决您的问题,其中之一是使用 position: absolute
和 transform
,如下所示:
#button-prop {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
此外,为了使上述代码工作,您需要将父级的position
设置为relative
。
#page {
position: relative;
}
然而,使用当前的 HTML
结构,使用传统方法将失败,因为您将按钮嵌套在容器内非常深的地方,该容器设置了 padding
。您需要对 HTML
结构进行一些重大更改才能获得最佳结果。最重要的是将 button
作为井的直接子级,#page
。
查看 JSFiddle here或以下代码段。
片段:
/* ----- CSS ----- */
div.background {
background-color: rgba(245, 245, 245, 0.1);
border-radius: 10%;
padding-bottom: 5%;
}
.quote-shape {
border-radius: 10%;
}
#page {
margin-left: 5%;
margin-right: 5%;
margin-top: 2%;
margin-bottom: 2%;
width: 1200px;
height: 450px;
max-height: 450px;
}
#page-background {
background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}
/*************** MY CODE ***************/
#page {
position: relative;
/* I change the dimensions to fit in the snippet. */
width: 80%;
height: 150px;
margin: 5% auto;
}
#button-prop {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
<!----- HTML ----->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="page-background">
<div class="well background" id="page">
<div class="fixed-width">
<div id="quote" class="position-message">
<span><p id="quote-form"></p></span>
</div>
</div>
<button type="button" id="button-prop" class="btn btn-outline-secondary btn-circle">
<i class="fa fa-refresh fa-2x"></i>
</button>
</div>
</body>
</html>
注意事项:
- 不要使用空格分隔的 ID,例如
click button-shape
,因为这只会让您的生活更难呈现选择器#click button-shape
无效,必须改用[id = "click button-shape"]
。 - 我只保留了您代码的相关部分。
关于javascript - 如何将元件放置在井底?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48237031/