孩子不在父 div 内

Question

小提琴： https ://jsfiddle.net/uatzust3/

这是解决我的问题的小提琴，您会发现孩子们没有留在父级 div card ，而且我还希望 div 占据父级的全宽，他们没有服用。

另外，我应该在哪里学习最佳实践？我是社区的新手。提前致谢。

左边的div (black_container) 内容不足，但应该根据右边div的宽度来安排高度 (content_container) 一直留在 card

 .card {
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.30), 0 15px 15px rgba(0, 0, 0, 0.22);
  max-width: 800px;
  margin: auto;
  position: relative;
}
.black_container {
  height: inherit;
  background: #333;
  display: inline-block;
  vertical-align: top;
  padding: 3%;
  font-family: 'Nunito', sans-serif;
}
.content_container {
  display: inline-block;
  padding: 3%;
  /* position: absolute;
    top:0;
    bottom: 0; */
}
.small_bar {
  padding: 3px;
  width: 30px;
  margin: 0 auto;
  background: #e4e4e4;
  margin-top: 35px;
}
.name {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 5px;
  margin: 30px auto 5px auto;
  text-align: center;
  font-weight: 800;
}
.designation {
  font-size: 10px;
  margin: 0 auto;
}
.qrcode_container {
  float: right;
}
.qr_container {
  overflow: auto;
  width: 100%;
}
.qr_text {
  display: inline-block;
  list-style-type: none;
}
.qr_text>li {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: #9a9a9a;
}
.bars {
  display: inline-block;
  position: relative;
  top: 10px;
}
.bars .small_bar {
  width: 15px;
  background: #777;
}
.bar {
  position: absolute;
  top: -80px;
}
.qr_code {
  display: inline-block;
  height: inherit;
  border: 1px solid #e4e4e4;
  padding: 5px;
}
.button {
  width: 150px;
  letter-spacing: 1;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  text-align: center;
  background: #333;
  padding: 5px 10px;
}

 <div class="card">
  <div class="black_container">
    <div class="circular">
    </div>
    <p class="small_bar"></p>
    <p class="name">wow</p>
    <p class="name designation">Front-End Designer</p>
  </div>
  <div class="content_container">
    <!-- qr code container ends -->
    <div class="qr_container">
      <div class="qrcode_container">
        <ul class="qr_text">
          <li>LOREM</li>
          <li>IPSUM</li>
          <li>DPOLER</li>
        </ul>
        <div class="bars">
          <div class="small_bar bar"></div>
          <div class="small_bar"></div>
        </div>
        <div class="qr_code"></div>
      </div>
    </div>
    <!-- qr code container ends -->
    <div class="card_content">
      <p>Hello!</p>
      <p>My name is lorem</p>
      <p>I am a web designer</p>
      <p>Im stuck</span>
      </p>
      <div class="button">button</div>
    </div>
    <div class="card_footer"></div>
  </div>
</div>

原文由 user7244979 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果孩子是 absolute ，父母不能获取直接孩子的身高，因为 absolute 元素已从文档流中删除（如 floats ），所以这种情况下“card”甚至不知道“content_container”的存在。

https://jsfiddle.net/OmarIsComing/eq4L86g9/1/

更新：

使用 flexbox 的解决方案： https ://jsfiddle.net/OmarIsComing/eq4L86g9/2/

没有 flexbox 的解决方案： https ://jsfiddle.net/OmarIsComing/eq4L86g9/3/

原文由 Adrian.I 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用类卡体，这将保留卡内的内容。

 <div class="card border-success">
    <div class="card-header border-success">
        <h3 class="card-title">Card Title</h3>
    </div>
    <div class="card-body border-success">
        <dl>
            <dt>
                Stuff
            </dt>

            <dd>
                Stuff Details
            </dd>
        </dl>
    </div>
</div>

原文由 Mike 发布，翻译遵循 CC BY-SA 4.0 许可协议