如何向内容div添加浮动返回和下一个按钮？

Question

我正在使用的模板有一个容器，包含内容和导航div。代码看起来像这样：

<div id="user_content" class="user_content">
<div class="main_content"> some content, text and whatever else, can be pretty long!</div>
<div class="content_nav">
<div class="col-md-3"><a id="prevB" href="http://google.com">CLICK HERE TO GO BACK!</a></div>
<div class="col-md-3"><a id="nextB" href="http://yahoo.com">CLICK HERE TO GO NEXT!</a></div>
</div>
</div>

参见下面的图1进行绘图。

main_content div的相关CSS：

.main_content {
    position: relative;
    left: 0px;
    width: 100%;
    display: block;
    transition: transform 0.5s ease 0s;
    height: auto;
}

我可以更改PHP以生成没有自己的div的BACK和NEXT链接，所以它看起来像这样：

<div id="user_content" class="user_content">
<a id="prevB" href="http://google.com">CLICK HERE TO GO BACK!</a>
<div class="main_content"> some content, text and whatever else, can be pretty long!</div>
<a id="nextB" href="http://yahoo.com">CLICK HERE TO GO NEXT!</a>
</div>
</div>

我不理解的是使<a> BACK和NEXT链接位于main_content容器的左侧和右侧的正确CSS。请参见下面的图2进行绘制。

以下是我尝试过的JFIDDLE的链接：https://jsfiddle.net/7wet25zn/

Answer 1

绝对的位置请：

#user_content{
  position:relative;
  border:2px solid green;
  height:300px;
}
#user_content a{
  position:absolute;
  top:50%;
  top: calc(50% - 0.5em);
}
#user_content a.next{
  position:absolute;
  right:0;
}

<div id="user_content" class="user_content">

  <div class="main_content"> some content, text and whatever else, can be pretty long!</div>

  <a class="prev" href="http://yahoo.com">&laquo; PREV</a>
  <a class="next" href="http://google.com">NEXT &raquo;</a>
  
</div>