Question

我有一个相对定位的div。在div里面我有内容，然后是一个绝对定位的标签。容器div扩展以适应所有内容，但绝对div正在运行其他内容而不是div扩展以适应两者。出现问题的原因是网站响应迅速，我希望链接跨多个div排列。任何建议将不胜感激。

.container {
    position: relative;
	width:100%;
  }

.child {
    width:90%;
    margin:15px 0;
    height:auto;
    overflow:auto;
  }

.child a {
    background: #e16d2a;
    border: 1px solid #e16d2a;
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    position: absolute;
	bottom:10px;
}

<div class="container">
  <div class="child">
    Curabitur vel feugiat neque, at molestie sem. Ut maximus blandit eros non cursus. Praesent at hendrerit ante. Phasellus volutpat nisl a ante porttitor consequat. Morbi commodo blandit mi, et dapibus mi cursus at. Sed ultricies at tortor a gravida. Proin dictum eleifend pulvinar. Etiam non nisl vel sapien ornare dignissim ornare eu quam. Maecenas lacinia, dui a aliquam molestie, nisl lorem ornare leo, laoreet ornare turpis neque sed elit. Curabitur ornare mauris id felis sollicitudin, sit amet viverra sem pulvinar. Proin porttitor pretium tortor, in aliquet risus auctor in. Nulla in arcu nec est tincidunt ornare. Donec tempor, tellus quis congue fermentum, massa ligula ultricies ligula, eu lobortis ipsum diam vitae tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus id metus a purus interdum efficitur et id arcu. Morbi turpis erat, efficitur id felis et, eleifend ultricies tortor. 
    <a href="#">Link here</a>
  </div>
</div>

Answer 1

在包含元素的底部添加一个始终存在的填充，以容纳绝对定位的元素空间。

另外，为了让链接在多个div之间排列，我使用将它们设置为display: table-cell的技巧，这将使较小的div共享最高div的高度。

.container {
    position: relative;
	width:100%;
  }

.child {
    width:90%;
    margin:15px 0;
    height:auto;
    overflow:auto;
    padding-bottom: 50px;
  }

.child a {
    background: #e16d2a;
    border: 1px solid #e16d2a;
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    position: absolute;
	bottom:10px;
}

<div class="container">
  <div class="child">
    Curabitur vel feugiat neque, at molestie sem. Ut maximus blandit eros non cursus. Praesent at hendrerit ante. Phasellus volutpat nisl a ante porttitor consequat. Morbi commodo blandit mi, et dapibus mi cursus at. Sed ultricies at tortor a gravida. Proin dictum eleifend pulvinar. Etiam non nisl vel sapien ornare dignissim ornare eu quam. Maecenas lacinia, dui a aliquam molestie, nisl lorem ornare leo, laoreet ornare turpis neque sed elit. Curabitur ornare mauris id felis sollicitudin, sit amet viverra sem pulvinar. Proin porttitor pretium tortor, in aliquet risus auctor in. Nulla in arcu nec est tincidunt ornare. Donec tempor, tellus quis congue fermentum, massa ligula ultricies ligula, eu lobortis ipsum diam vitae tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus id metus a purus interdum efficitur et id arcu. Morbi turpis erat, efficitur id felis et, eleifend ultricies tortor. 
    <a href="#">Link here</a>
  </div>
</div>

Answer 2

删除孩子a的绝对位置

.child a {
    background: #e16d2a;
    border: 1px solid #e16d2a;
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    bottom:10px;
}

如果您想在底部显示，请使用最大宽度

的显示块

.child a {
    background: #e16d2a;
    border: 1px solid #e16d2a;
    color: #fff;
    display: block;
    padding: 5px 15px;
    max-width: 100px;
    bottom:10px;
}

CSS儿童绝对内容重叠父内容

2 个答案: