Question

我有以下简单的HMTL和CSS代码，您也可以在JSfiddle here中找到这些代码：

body {
  height: 500px;
}

.image {
  width: 100%;
  height: 30%;
  background-color: blue;
  
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.image_details {
 height: 100%;
 width: 100%;
 background-color: yellow;
 
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
}

.image img {
 height: 100%;
 width: 100%;
 display: block;
 float: left;
 background-color: red;
 
 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
}

.prev_button {
  float: left;
  width: 20%;
   background-color: blue;
}

.next_button {
  float: right;
  width: 20%;
  text-align: right;
  background-color: blue;
}

<div class="image">
 <div class="image_details"> <img src="http://placehold.it/101x101"> </div>
</div>

 <div class="prev_button"> PREVIOUS </div>
 <div class="next_button"> NEXT </div>

如您在上面的代码中看到的，我想要一个image和一个prev和next按钮。但是，我不想在prev下方放置next和image按钮，而是希望它们在左中心和右中心在image中。

要使此功能有效，我必须更改什么代码？

Answer 1

一种简单的方法是使用绝对定位。将按钮作为.image的子项插入，并将父项设置为position: relative。从我的完整示例中可以看出，孩子需要position: absolute;并且必须被安置。我还从CSS中删除了高度，所以避免拉伸img。

body * {
  box-sizing: border-box;
}

.image {
  width: 100%;
  background-color: blue;
  border-style: solid;
  border-width: 1px;
  position: relative;
}

.image_details {
  width: 100%;
  background-color: yellow;
  border-style: solid;
  border-width: 1px;
}

.image img {
  width: 100%;
  display: block;
  background-color: red;
  border-style: solid;
  border-width: 1px;
}

.prev_button, .next_button {
  width: 20%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: blue;
}

.prev_button {
  left: 0;
}

.next_button {
  right: 0;
  text-align: right;
}

<div class="image">
 <div class="image_details"><img src="http://placehold.it/101x101"></div>
 <div class="prev_button">PREVIOUS</div>
 <div class="next_button">NEXT</div>
</div>

将上一个和下一个按钮嵌入图像

1 个答案: