html – 没有呆在父母div中的孩子

2023年5月30日 278次阅读

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

这是我的问题的小提琴,你会发现孩子们不会留在父级div卡内,而且我希望div能够占用他们没有服用的父母的全宽.

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

左div(black_container)缺少内容,但是应该在保持在div div内的同时根据右div(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;
}
.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>

最佳答案 如果子项是绝对的,则父项不能获取直接子项的高度,因为绝对元素从文档流中移除(如浮点数),因此在这种情况下,“卡”甚至不知道“content_container”存在.

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

更新：

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

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

点赞