Question

在css中恢复页面流的最佳方法是什么。

以下是我的情况：

我有3个div div 1（父），div 1（子）和div 2（正常）。父div是绝对的，孩子是亲戚。到目前为止一切都很好。我遇到的问题是下一个正常div被移动到与绝对div相同的行（因为我中断了将父div设置为绝对的页面流）。

所以我的问题是如何将普通div放在具有绝对位置的div下。我是否只是抵消了保证金最高的财产？

感谢您的帮助！

看看：https://jsfiddle.net/veLgmdt1/

Answer 1

http://jsfiddle.net/veLgmdt1/6

使用行和浮动列简化HTML结构。这将消除对保证金和绝对定位的需求。

<div class="content-wrapper">
    <div class="row">
        <div class="col col-lg-3">
            <img src="http://lorempixel.com/230/230/" class="img-rounded">
            <button class="btn btn-primary">Invite To Project</button>
            <ul class="list-unstyled">
                <li>Member Since: July 21, 2016</li>
                <li>Toronto, ON</li>
                <li>
                    <ul class="list-inline">
                        <li>Social:</li>
                        <li><a href=""><i class="fa fa-facebook"></i></a></li>
                        <li><a href=""><i class="fa fa-twitter"></i></a></li>
                        <li><a href=""><i class="fa fa-pinterest"></i></a></li>
                        <li><a href=""><i class="fa fa-google-plus"></i></a></li>
                        <li><a href=""><i class="fa fa-youtube"></i></a></li>
                    </ul>

                </li>

            </ul>
        </div>
        <div class="col col-lg-9">
            <h2 class="profile-name">John Doe</h2>
            <h4 class="">Graphic Designer</h4>
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

                Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
        </div>
    </div>
    <div class="row">
         <ul class="nav nav-pills" role="tablist">
            <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
        </ul>
    </div>
</div>

CSS

.content-wrapper {
    width: 1000px;
    margin: 0 auto;
}

.row {
  width: 100%;
  padding-top: 20px;
}

.row:nth-child(odd) {
    background-color: #f5f5f5;
    border-bottom: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
}

.col {
  float: left;
}

.col-lg-3 {
  width: 25%
}

.col-lg-9 {
  width: 75%
}

.profile-heading {
   margin-top: 50px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #DDDDDD;
  border-top: 1px solid #DDDDDD;
}

.profile-heading > .panel {
  position: relative;
  background-color: inherit;
  margin: 0 auto;
  width: 1000px;
  border: none;
}

Answer 2

如果您知道绝对定位元素的height，那将很容易。只需添加等于已知身高的padding / margin或placeholder div。

如果高度是动态的，则必须求助于jQuery / JavaScript。

看看我的演示，其中显示了默认行为和提到的方法：

// get the absolute-positioned element
var abs = $("#dynamic .absolute");

// get height of absolute-positioned element
var absHeight = abs.height();

// insert placeholder div with height equal to absolute-positioned element
$("<div class='placeholder'></div>").height(absHeight).insertAfter(abs);

section {
  position: relative;
  padding: 1em;
  margin: 1em;
  border: 1px solid #CCC;
}

section div {
  border: 1px dashed blue;
}

.absolute {
  position: absolute;
  top: 0;  z-index: 1;
  border:1px solid red;
  height:50px;
}

#margin .absolute+div {
  margin-top:50px;
}

#padding .absolute+div {
  margin-top:50px;
}

.placeholder { height:50px; border:none }

#dynamic .absolute {
  height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Default Behaviour</h3>
<section>
  <div class="absolute">position:absolute</div>
  <div>normal div</div>
</section>

<h3>Known height: top margin</h3>
<section id="margin">
  <div class="absolute">position:absolute</div>
  <div>normal div with margin-top</div>
</section>

<h3>Known height: top padding</h3>
<section id="padding">
  <div class="absolute">position:absolute</div>
  <div>normal div with padding-top</div>
</section>

<h3>Known height: placeholder div</h3>
<section>
  <div class="absolute">position:absolute</div>
  <div class="placeholder"></div>
  <div>normal div</div>
</section>

<h3>Dynamic height: JavaScript/jQuery</h3>
<section id="dynamic">
  <div class="absolute">position:absolute</div>
  <div>normal div</div>
</section>

jsFiddle：https://jsfiddle.net/azizn/mq6bejhf/

绝对Div后的CSS Div定位

2 个答案: