html - 将上一个和下一个按钮嵌入到图像中

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 中删除了高度，因此避免拉伸(stretch) 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>