html - 孩子不留在父 div 内

Question

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

这是我的问题的小提琴，你会观察到孩子们没有留在父 div 内card，而且我希望divs 占据他们没有占据的父母的全宽。

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

左边的 div(black_container)内容少，但要一直按照右边的 div 的宽度排列高度，(content_container)同时留在carddiv 里面。

.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

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/

Answer 2

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

1. 添加display: flex到您的card

2. 添加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 3

使用类 card-body，这会将内容保留在卡片内。

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

Answer 4

将.content_containercss替换为：

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

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