子元素没有停留在父级div内

Question

Fiddle: https://jsfiddle.net/uatzust3/

这是我的问题的代码示例，您会发现子元素没有保持在父容器card内，并且我希望div占据其父容器的整个宽度，但它们并没有。

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

左侧(black_container)的内容很少，但应根据右侧(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

---

你想要三个div在同一行吗？ - Vel

添加你的 CSS... - ADH - THE TECHIE GUY

仅凭代码本身很难确定您试图实现的设计。我建议阅读一些关于 Flexbox、CSS3 Grid、多列布局 或者 Bootstrap 网格系统 的内容，以加快进度。 - L J

谢谢LJ。我会尝试，但是作为一名设计师，使用Bootstrap会很容易解决问题。但是如果不使用Bootstrap来完成设计，这将是我的真正考验。 - user7244979

@dreamhunter 感谢您提供的 fiddle 链接，其中包含 CSS 代码... 再次感谢。 - user7244979

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

---

感谢您的帮助。您的解决方案没有让“black_container” div占据整个高度，也没有让“content_container”占据整个宽度。如果您能帮我解决这个问题，那就太好了。 - user7244979

谢谢...它起作用了...你能给我一个清晰的想法，为什么我们在卡片内使用绝对定位和相对定位的div吗？谢谢... - user7244979

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>

- kukkuz

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>

- Mike

Answer 4

将 .content_container 的 CSS 替换为：

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

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

- Aboodz