Question

我遇到了堵塞，我似乎无法前进。我试图从主DIV中移出一个带有一些选项（例如报告，例如，不喜欢等）的小盒子，但仍然保持从外面粘合它。让我用图像演示：

Demonstration

我尝试过这几种方法，但问题是盒子位于正文的中心，这意味着左侧和右侧有一些填充（通过Bootstrap类的响应填充集）所以我很无法计算整件事。

我通过jQuery试过这样的事情：

$('.image-options').css('right', $('.image-options').parent().width() + 50 + 'px');

$(window).resize(function(){
    $('.image-options').css('right', $('.image-options').parent().width() + 50 + 'px');
})

其中.image-options是选项框，其父级是Main DIV。我想象选项框的宽度一直都是 50px ，所以我认为这使整个定位问题更容易一些。

我正在 Bootstrap 3 之上构建我的网站，所以我使用了很多他们的课程。这就是我的HTML的样子（忽略模板语法）：

{% extends "base.twig" %}
{% block content %}
<div class="content row">
    <div class="col-lg-12">
        {% include "overall_header.twig" %}

        <div class="row">
            <section class="col-lg-12">
                <div class="upload-space">
                    <!-- This is the options box -->
                    <div class="affix image-options">
                        Report
                    </div>      

                    <div class="row inner">
                        <section class="col-lg-12">

                            <section class="row">

                                <div class="col-lg-12 center">
                                    <a href="{{ S_IMAGE_URL }}" class="lightview">
                                        <img src="{{ S_IMAGE_URL }}" class="img-thumbnail" alt="{{ S_IMAGE_NAME }}" />
                                    </a>
                                </div>

                                <br />

                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="direct_url">Direct:</label>
                                        <input type="text" class="form-control" onclick="this.select()" value="{{ S_IMAGE_URL }}" readonly>
                                    </div>

                                    <div class="form-group">
                                        <label for="direct_url">Thumbnail:</label>
                                        <input type="text" class="form-control" onclick="this.select()" value="{{ S_IMAGE_THUMB }}" readonly>
                                    </div>

                                    <div class="form-group">
                                        <label for="direct_url">Direct:</label>
                                        <input type="text" class="form-control" onclick="this.select()" value="{{ S_IMAGE_BBCODE }}" readonly>
                                    </div>

                                    <div class="form-group">
                                        <label for="direct_url">Direct:</label>
                                        <input type="text" class="form-control" onclick="this.select()" value="{{ S_IMAGE_HTML }}" readonly>
                                    </div>
                                </div><!-- col -->

                            </section> <!-- row -->
                        </section> <!-- col -->
                    </div><!-- .row.inner -->
                </div>
            </section>
        </div><!-- row -->

    </div><!-- Main column -->
</div><!-- Content -->
{% endblock content %}

这是我为我的选项框写的小CSS：

.image-options {
    background: yellow;
    width: 50px;
    word-break: break-word;
}

在我们的案例中，

.upload-space是主DIV 。

如果页面响应且主DIV的宽度/高度可能因浏览器大小而异，如何让选项框始终粘在主DIV上？

感谢。

Answer 1

有了这个结构：

<div class="upload-space">
   <!-- This is the options box -->
   <div class="affix image-options">
       Report
   </div>

您可以通过以下方式使用position:absolute：

.upload-space {
  position:relative;
}
.image-options {
  position:absolute;
  width:50px;
  top:0;
  left:-50px;
}

选中此Demo Fiddle

Answer 2

为什么要使用javascript？你可以用简单的CSS做到这一点。

如果我理解你的愿望，你可能正在寻找这样的东西？

http://codepen.io/steveHimself1397/pen/gxatc

史蒂夫

Answer 3

你是说像是什么意思吗？ http://tarcisius-ede.nl/ 此？

如果是这样，请参阅css文件以获取信息。它有一个主div（包装div），而且optionbox有负余量。

我们使用css媒体查询来使其适合不同的浏览器宽度。并且元素的位置是绝对的，但这是额外的......

将一个方框放在主DIV之外，但仍然与之相关

3 个答案: