css 如何在内容div中添加浮动的后退和下一个按钮？

vptzau2j 于 2022-12-20 发布在其他

关注(0)|答案(3)|浏览(171)

我正在使用的模板有一个容器，包含内容和导航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来生成BACK和NEXT链接，而不使用它自己的div，因此它看起来如下所示：

<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>

我不明白的是如何使用CSS来使<a> BACK和NEXT链接位于main_content容器的左侧和右侧，如下图2所示。

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

css

来源：https://stackoverflow.com/questions/34373295/how-to-add-floating-back-and-next-buttons-to-content-div

3条答案

按热度按时间

hc2pp10m1#

将absolute锚点放置在顶部50%处，然后减去0.5em（字体大小的一半，或任何其他值）：

.user_content {
  position: relative;
  background: #eee;
  height: 160px;
}
.user_content a {
  position: absolute;
  top: calc(50% - 0.5em);
}
.user_content a.next {
  right: 0;
}

<div class="user_content">

  <div class="main_content"></div>

  <a class="prev" href="#!">PREV</a>
  <a class="next" href="#!">NEXT</a>
  
</div>

赞(0）回复(0）举报 2022-12-20

gcmastyq2#

如果您的{content}部件是高的，并且prev和next按钮应该位于视口的中间（而不是高的div），您可以将display:block; position:fixed; top:50%;添加到prev和next链接中，这样无论div的高度如何，它都将可见。

赞(0）回复(0）举报 2022-12-20

r6l8ljro3#

我最近在页面上构建工具提示时遇到了类似的问题。这不是我以前遇到过的问题，我想用HTML和CSS来做。最后对我有效的是定义一个父容器，让你想要的内容像这样浮动：

<div class="parent-container">
  <div class="child"></div>
  <div class="child"></div>
</div>

并将CSS定义为：

.parent-container {
  position: relative;
}

.child {
  position: absolute;

}

这允许你相对于父容器的位置来设置子类的宽度和高度。祝你好运！

赞(0）回复(0）举报 2022-12-20

我来回答

css 如何在内容div中添加浮动的后退和下一个按钮？

3条答案

相关问题

热门标签

最新问答