Question

我面临的问题是在数据div中对齐内容div。数据div没有修复高度。因为当内容div增加时它是自动高度。

但它已经过时了。怎么解决？

.container
{
  position:relative;
  border:1px solid blue;
  margin:auto;
  width:200px;
}

.data
{
  position:relative;
  border:1px solid green;
  width:100px;
  top:10px;
  left:10px;
}

.hed
{
  position:absolute;
  border:1px solid orange;
  width:30px;
  height:10px;
  top:-5px;
  left:10px;
  border-radius:5px;
  background-color:orange;
  line-height:10px;
}

<div class="container">
  <div class="data"> This is absolute.</div>
  <div class="hed">xxx</div>
</div>

Answer 1

您可以设置

overflow:hidden;

到“容器”div

Answer 2

如果您希望在展开container div时展开data，请在结束<br style = "clear:both">代码前添加div。

FIDDLE

Answer 3

将所有css位置更改为relative并使用min-height然后尝试

像这样

.container {
    position:relative;
    border:1px solid blue;
    margin:auto;
    width:200px;
    min-height:10px; //added
}
.data {
    position:relative;
    border:1px solid green;
    width:100px;
    top:10px;
    left:10px;
}
.hed {
    position:relative;  //changed
    border:1px solid orange;
    width:30px;
    height:10px;
    top:-50px; //changed
    left:10px;
    border-radius:5px;
    background-color:orange;
    line-height:10px;
}

WORKING DEMO

Answer 4

为什么用于 div class =＆＃34;数据＆＃34; ：

顶
左

你需要用 margin-top 和 margin-left 替换它们。

＆＃13;

.container
{
  position:relative;
  border:1px solid blue;
  margin:auto;
  width:200px;
}

.data
{
  position:relative;
  border:1px solid green;
  width:100px;
  margin-top:10px; // changed
  margin-left:10px; // changed
}

.hed
{
  position:absolute;
  border:1px solid orange;
  width:30px;
  height:10px;
  top:-5px;
  left:10px;
  border-radius:5px;
  background-color:orange;
  line-height:10px;
}

＆＃13;

<div class="container">
  <div class="data"> This is absolute.</div>
  <div class="hed">xxx</div>
</div>

＆＃13;

定位div元素

4 个答案: