детей не оставаясь в родительских дивах

Question

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

Вот скрипка для моей проблемы, вы будете наблюдать, что дети не находятся внутри родительского DIV card, а также я хочу div s взять полную ширину родителей, которых они не принимают.

Кроме того, где я должен изучать лучшие практики? Я новичок в сообществе. Заранее спасибо.

Левый 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

Родитель не может взять высоту прямого ребенка, если ребенок absolute потому что absolute элементы удаляются из потока документов (например, floats), так что в этом случае «карта» даже не знает «content_container» даже существует .

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

обновление:

решение с Flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/2/

раствор без Flexbox: https://jsfiddle.net/OmarIsComing/eq4L86g9/3/

Answer 2

заменить .content_container CSS с:

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

Вы неправильно позицию absolute. Короче говоря, позиция absolute удаляет элемент из потока других элементов; поэтому его высота просто игнорируется и никогда не учитывается в вашем контейнере .card.

Answer 3

Если 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>