Question

JSFIDDLE：http://jsfiddle.net/5nd6bexc/1/

我正在尝试在 contactus 按钮旁边放置一个div（联系我们表单），该按钮不是父级。如果div是父级，我知道如何实现这一点（例如 contactus 已经使用它放在页面中）

我得到的最好的是：

.managed-form {
background-color:#5B8F22;
width: 311px;
height: 369px;
 z-index:99;
  float: right;
  margin: -75% 0% 0% 55%;
  position:absolute;
  display:none;
}

但它不对，因为它根据父div

进行定位

HTML CODE

...........
...........
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 top-area">
            <div class="managed-area row">
                <div class="block-wrapper sliderblock">
                    <div class="block">
                        <div class="owl-carousel">
                            <div class="item slide">
                                <img src="/xcf.png" class="slide-image" />
                                <div class="slide-content">
                                     <h2>Slide 1</h2>
                                    <div class="managed-content">
                                        <p>This is slide 1</p>
                                    </div>
                                </div>
                            </div>
                            <div class="item slide">
                                <img src="cfv.png" class="slide-image" />
                                <div class="slide-content">
                                     <h2>Slide 2</h2>
                                    <div class="managed-content">
                                        <p>This is slide 2</p>
                                    </div>
                                </div>
                            </div>
                        </div> <span class="ContactForm" id="ContactForm">CONTACT US &or; </span>

                    </div>
                    <div class="color-stripe color-stripe-2"></div>
                </div>
            </div>
.............
.............
.............
   <div class="managed-form">
            <div class="ContactForm-Heading">Contact Us</div>
            <div class="ContactForm-Subheading">   <div class="managed-form">
            <div class="ContactForm-Heading">Contact Us</div>
            <div class="ContactForm-Subheading"></div>
            <hr />
            <div >
            <hr />
            <div >
           ......
    </div>

Answer 1

好吧，如果按钮具有固定宽度，并且您希望按钮和表单之间的空间是固定宽度，则只需添加它们即可。下面的示例代码将在2个元素之间留出100px的空间。

.button: {
  position: absolute;
  right: 0;
  width: 20px;
}
.form {
  position: absolute;
  right: 120px;
}

另一方面，如果您希望按钮和表单之间的空格为百分比，则应执行以下操作：

.button: {
  position: absolute;
  right: 0;
  width: 20px;
}
.form {
  margin-right: 20%;
  position: absolute;
  right: 20px;
}

根据不在父级中的另一个div设置div的边距

1 个答案: