内联块div中的子元素会改变父母兄弟姐妹的位置

Question

我有几个div有一些内容（另一个div里面）。我希望父div位于一个很好的行中，我希望子div相对于它的父。

我做了一个JSFiddle来说明。现在div已经很好地放置了，但是如果你删除了＆＃39; .btn＆＃39;在最后一个div中，一切都搞砸了。

要了解我的意思，请将JSFiddle中的HTML更改为：

<div id="expand1" class="expand">
  <div id="btn1" class="btn">>></div>
</div>
<div id="expand2" class="expand">
  <div id="btn2" class="btn">>></div>
</div>
<div id="expand3" class="expand"></div>

这里发生了什么？我怎样才能得到理想的结果？

Answer 1

您应该使用浮动来获得更好的布局：

＆＃13;

＆＃13;

.expand{
  border:1px solid black;
  width:400px;
  height:400px;
  display:inline-block;
  float: left;
}

.btn{
  cursor:pointer;
  position:relative;
  top:150px;
  left: 150px;
  border: 1px solid black;
  width:40px;
  height:40px;
  vertical-align:middle;
  text-align:center;
  line-height:40px;
}

＆＃13;

<div id="expand1" class="expand">
  <div id="btn1" class="btn">>></div>
</div>
<div id="expand2" class="expand">
  <div id="btn2" class="btn">>></div>
</div>
<div id="expand3" class="expand"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.expand {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  display: inline-block;
  vertical-align: top;
}

.btn{
  margin: -20px 0 0 -20px;
  cursor: pointer;
  position: relative;
  top: 50%;
  left: 50%;
  border: 1px solid black;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  text-align: center;
  line-height: 40px;
}

<div id="expand1" class="expand">
  <div id="btn1" class="btn">>></div>
</div>
<div id="expand2" class="expand">
  <div id="btn2" class="btn">>></div>
</div>
<div id="expand3" class="expand"></div>

Answer 3

您只需使用position属性即可获得所需的结果。

只需将位置：相对添加到。展开类

.expand {
        position:relative;
        border: 1px solid black;
        width: 400px;
        height: 400px;
        display: inline-block;
    }

并将绝对的位置更新为。 btn 类

.btn {
        cursor: pointer;
        position: absolute;
        top: 150px;
        left: 150px;
        border: 1px solid black;
        width: 40px;
        height: 40px;
        vertical-align: middle;
        text-align: center;
        line-height: 40px;
    }