我有两个按钮,其位置绝对位于容器位置绝对位置。它看起来很好但是当我调整窗口大小时,按钮显示一个在另一个上面。如果边距小于10px,我该如何让第二个按钮转到下一行?
这是我的HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="one/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="map-canvas" class="jumbotron" style="position: relative"></div>
<div class="jumbotron" style="position: relative"></div>
<div style="position: absolute; top: 65%;">
<a href="two/index.html" class="btn btn-default btn-lg" style="margin: 30px;">Two Explorers</a>
</div>
<div style="position: absolute; top: 65%">
<a href="one/index.html" class="btn btn-default btn-lg" style="margin: 30px;display:block ">One Explorer</a>
</div>
<div id="overlay" style="height: 50%;display: table;">
<div class="container" style="display: table-cell;vertical-align: middle;width:100%; text-align: center">
<h1>The Demo of The Band to the Pole</h1>
<h3>Select the version you want to see</h3>
</div>
</div>
</body>
</html>
它基于CSS的Bootstrap。我添加了这个ID:
#map-canvas {
height: 100vh;
position: relative;
margin:0px;
background: transparent no-repeat 1 1;
}
#overlay {
top:0px;
background: #fff;
opacity: .8;
position: absolute;
padding: 10px;
margin: auto;
width: 100%;
}
答案 0 :(得分:0)
style
。它比你想象的要糟糕得多,因为迟早你需要在整个网站范围内修改你的元素,此时你将开始寻找内联代码,而不是从一行修改所有这些元素。代码position:absolute
。相反,将它们放在父级(包装器)中,并将父级绝对定位。如果您需要有关代码的实际示例,请提供minimal, complete and verifiable example您的问题。 (将CSS及其余资产添加到您的代码段中,直到我们可以体验您所描述的问题 - 一般来说,当您需要图片来描述您的问题时,您做错了< / em>的)。
将按钮部分替换为:
<div class="overlayButtons">
<a href="two/index.html" class="btn btn-default btn-lg">Two Explorers</a>
<a href="one/index.html" class="btn btn-default btn-lg">One Explorer</a>
</div>
并将其添加到您的CSS:
.overlayButtons {
position: absolute;
top: 65%;
padding: 30px;
left: 0;
right: 0;
text-align: center;
}
.overlayButtons .btn-lg {
margin: 5px 10px;
min-width: 150px;
}
演示:
body {margin: 0;}
#map-canvas {
height: 100vh;
position: relative;
margin: 0px;
background: transparent no-repeat 1 1;
}
#overlay {
top: 0;
background: #fff;
opacity: .8;
position: absolute;
padding: 10px;
margin: auto;
width: 100%;
}
.overlayButtons {
position: absolute;
top: 65%;
padding: 30px;
left: 0;
right: 0;
text-align: center;
}
.overlayButtons .btn-lg {
margin: 5px 10px;
min-width: 150px;
}
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="map-canvas" class="jumbotron" style="position: relative"></div>
<div class="overlayButtons">
<a href="two/index.html" class="btn btn-default btn-lg">Two Explorers</a>
<a href="one/index.html" class="btn btn-default btn-lg">One Explorer</a>
</div>
<div id="overlay" style="height: 50%;display: table;">
<div class="container" style="display: table-cell;vertical-align: middle;width:100%; text-align: center">
<h1>The Demo of The Band to the Pole</h1>
<h3>Select the version you want to see</h3>
</div>
</div>
&#13;
注意:您的标记可以使用一些改进。如果您提供其实时版本的链接,我可以提出一些建议。