Question

正如您从我的网站图片中看到的那样：

https://www.flickr.com/photos/77598212@N03/33735427334/in/dateposted-public/

我的按钮紧挨着随机生成的文本。相反，我想降低它。但另外，我试图让它完全“锚定”到页面，因为现在当我单击按钮时，会生成随机图像，但该图像会根据图像的大小垂直移动按钮。不好。

相反，我希望该按钮始终保持在同一位置。

任何想法/帮助将不胜感激。我对这一切还很陌生。谢谢。 -Wilson

链接到实际网站http://www.wilsonschlamme.com/test4.html

的CSS： *这很简单。这里的前两个元素是控制页面居中。其余的是自解释的，showtext指的是随机文本生成器。

*{
margin:0;
padding:0;

}

body{
text-align:center; /*For IE6 Shenanigans*/
}

button {
color: #900;
font-weight: bold;
font-size: 150%;
  text-transform: uppercase;

}

h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;



}

img {
max-width:600px;
max-height:440px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}

#ShowText{

overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 25px;
font-family: vendetta, serif;
line-height: 25px;
margin: 0 auto;
}

Answer 1

使用：

#buttonfun {
  margin-top: 20px;
}

用div包裹img：

<div class="image-wrapper">
   <img src="images/297.jpg" />
</div>

并添加CSS：

.image-wrapper {
  height: 440px;
}

定位按钮并阻止移动？

1 个答案: