Question

我用相同的标题问了一个类似的问题并收到了两个解决方案，但他们都有一些不规则性。我希望两个兄弟元素在不使用绝对位置的情况下位于相同的顶部位置，因为它不会影响其下面的其他元素，这些元素直接依赖于位于页面中的两个元素

1。解决方案＆＃39;显示：内联;＆＃39;。 这个解决方案似乎是我一直在寻找的，但如果第一个元素有块子和大孩子，那么第二个元素被垂直向下推。我想要的是两个元素都处于相同的顶部位置。这是该解决方案的代码。

＆＃13;

#parent {
    border: 1px solid black;
    background: #efefef;
} /*To indicate the parent*/
#child1 {
    background: green;
    position: relative;
    width: 60%;
    min-height: 30px;
}
#child2 {
    background: rgb(9,9,9);
    position: relative;
    width: 30%;
    height: 50px;
    color: white;
}
.aligned {
   display:inline-block;
}

＆＃13;

<div id = "parent">
  <div id = "child1" class="aligned">
  <div>This is child one</div>
  <div>This is child one</div>
  <div>This is child one</div>
    </div>
  <div id = "child2" class="aligned">This is child two</div>
</div>
<div id = "two">
  This is a follow up element.
 </div>

＆＃13;

2。解决方案＆＃39; float：left＆＃39; 对于这种方法，两个元素都处于相同的顶部位置，但是父元素下方的所有元素都被置换，而不是它应该处于的位置。父母也没有身高，就好像孩子们绝对定位一样，

＆＃13;

#parent {
    border: 1px solid black;
    background: #efefef;
} /*To indicate the parent*/
#child1 {
    background: green;
    position: relative;
    width: 60%;
    min-height: 30px;
}
#child2 {
    background: rgb(9,9,9);
    position: relative;
    width: 30%;
    height: 50px;
    color: white;
}
.aligned {
    float:left;
}

＆＃13;

<div id = "parent">
  <div id = "child1" class="aligned">
  <div>This is child one</div>
  <div>This is child one</div>
  <div>This is child one</div>
    </div>
  <div id = "child2" class="aligned">This is child two</div>
</div>
<div id = "two">
  This is a follow up element.
 </div>

＆＃13;

＆＃13;
提前谢谢。

Answer 1

解决方案＃1 。解决方案是将vertical-align: top;与您的内联元素一起使用：

.aligned {
  display: inline-block;
  vertical-align: top;
}

查看演示。

#parent {
  border: 1px solid black;
  background: #efefef;
}
/*To indicate the parent*/

#child1 {
  background: green;
  position: relative;
  width: 60%;
  min-height: 30px;
}
#child2 {
  background: rgb(9, 9, 9);
  position: relative;
  width: 30%;
  height: 50px;
  color: white;
}
.aligned {
  display: inline-block;
  vertical-align: top;
}

<div id="parent">
  <div id="child1" class="aligned">
    <div>This is child one</div>
    <div>This is child one</div>
    <div>This is child one</div>
  </div>
  <div id="child2" class="aligned">This is child two</div>
</div>
<div id="two">
  This is a follow up element.
</div>

解决方案＃2 。关于你的花车问题，它也很简单。如果你使用它们，你只需要“清除”浮动。有多种技术可以做到，其中一种是将overflow: auto;添加到父容器中。

#parent {
  border: 1px solid black;
  background: #efefef;
  overflow: auto;
}
/*To indicate the parent*/

#child1 {
  background: green;
  position: relative;
  width: 60%;
  min-height: 30px;
}
#child2 {
  background: rgb(9, 9, 9);
  position: relative;
  width: 30%;
  height: 50px;
  color: white;
}
.aligned {
  float: left;
}

<div id="parent">
  <div id="child1" class="aligned">
    <div>This is child one</div>
    <div>This is child one</div>
    <div>This is child one</div>
  </div>
  <div id="child2" class="aligned">This is child two</div>
</div>
<div id="two">
  This is a follow up element.
</div>

将两个兄弟元素定位在同一顶部而不使用绝对位置（2）

1 个答案: