我网站上的响应元素

时间:2018-06-24 19:54:34

标签: html css responsive-design

我知道这个问题对很多人来说都是容易的,但对我来说不是,特别是我不是前端开发人员,我有一个大学项目完全依赖于后端并且有一个简单的项目前端代码。
我在2个绿色框下面有2个按钮,这些按钮应该在绿色框的中间,在我的PC的小屏幕上,一切正常,它们就这样位于我的屏幕中间。 enter image description here

但是如果我在大学时使用的计算机将与教授讨论时使用,则形状将完全不同。
enter image description here
看到按钮是如何移动的,因为代码网站没有响应?
这是我的按钮的CSS代码

.spots .spot button{
  background-color: white; 
  color: black; 
  border: 2px solid grey;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor:pointer;
  display:block;
  float:left;
  border-radius:10px;
  position:absolute;
}
.spots .spot button:hover{
  background-color: #4CAF50;
  color: white;
}
.spots .spot #park1button{
  top:1700px;
  left:130px;
}
.spots .spot #park2button{
  top:1700px;
  left:370px;
}  

html代码:

<div class="normal spot">
    <h2>For Daily Customers</h2>
    <div id="park1"class="colorofback">
      <p id="park1p">spot number 1 is available</p>
    </div>
    <div id="park2" class="colorofback">
      <p id="park2p">spot number 2 is available</p>
    </div>
    <button id="park1button">click to book</button>
    <button id="park2button">click to book</button>
</div>

最后是2个按钮的容器的CSS代码

.spots{
  overflow:hidden;
  width:100%;
}
.spots h1{
  color:Teal;
  text-align:center;
}
.spots .spot{
  width:48%;
  float:left;
  padding:7px;
}
.spots .normal{
  border-right:1px solid black;
}
.spots .spot h2{
  color:#696969;
  text-align:center;
}
.spots .spot .colorofback{
  width:200px;
  height:300px;
  background-color:green;
  border-radius: 5%;
  color:white;
  text-align: center;
  font-size:40px;
  margin-left:25px;
  margin-right:10px;
  float:left;
  padding:2px;
}
.spots .spot .colorofback p{
  text-align: center;
  padding:8px;
}  

那么即使我更改屏幕尺寸,怎么也不能始终在2个绿色框下方的中间显示按钮?

1 个答案:

答案 0 :(得分:0)

尝试flex属性,除非您的项目将在某些旧的浏览器上运行,否则使用它非常舒适。 我的情况是您使用了position:absolute css属性,它将根据顶部和左侧的值来绝对定位DOM元素。我想这就是原因。删除位置绝对属性。除非必要,否则不要使用它。此属性的需要完全不同,仅当您要放置与另一个Dom相邻的内容(例如:下拉列表)时才应使用此属性,并且可以改善html的结构。基于预览,我建议您将可用的div和相应的按钮放在一个div中。对两者都执行此操作,并为父div添加align:center属性。这将使所有内容垂直居中对齐,并且在屏幕尺寸更改时也不会中断。