children 不在 parent div 内

Question

这是针对我的问题的 fiddle，您会发现 children 并没有留在 parent div card 中，而且我希望 div 占据 parent 的全宽，而他们没有占据。

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

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

.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>

Answer 1

将 .content_container css 替换为：

.content_container {
    display: inline-block;
    padding: 3%;
    vertical-align: top;
}

我认为 CSS 属性 position: absolute; 导致了这个问题。简而言之，absolute position 将元素从其他元素流中移除；因此，它的高度被简单地忽略了，并且永远不会计算在您的 .card 容器中。

Answer 2

如果 child 是 absolute，

A parent 不能获取直接 child 的高度，因为 absolute 元素已从文档流中删除（比如 floats），所以在这种情况下 "card" 甚至不知道 "content_container" 存在。

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

更新：

弹性盒解决方案：https://jsfiddle.net/OmarIsComing/eq4L86g9/2/

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

Answer 3

如果 flexbox 是一个选项，这很容易：

将 display: flex 添加到您的 card
将flex: 1添加到content-container

参见下面的演示：

.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;
  display: flex;
}
.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; */
  flex: 1;
}
.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>

Answer 4

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

<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>

children 不在 parent div 内

children not staying inside parent divs

html

css

grid-system