3
小提琴：https://jsfiddle.net/uatzust3/孩子不能呆在父母的div內
這裏是我的問題的小提琴，你會觀察到孩子們沒有停留在父DIV card內，我也想了div s到充分的寬度的父母，他們沒有采取。
另外，我應該在哪裏學習最佳實踐？我對社區很陌生。提前致謝。
左邊的div (black_container)缺少內容，但應該根據右邊div的寬度(content_container)排列高度，同時停留在card div之內。
.content_container {
display: inline-block;
padding: 3%;
vertical-align: top;
}
您濫用位置absolute：
.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>
你要三個格是單行？ – vel
添加你的css ... –
通過單獨查看代碼很難確定你試圖完成的設計。我會建議少閱讀[Flexbox]（https://css-tricks.com/snippets/css/a-guide-to-flexbox/），[CSS3 Grid]（https://css-tricks.com/snippets/css/complete-guide-grid /），[多列布局]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts）或[Bootstrap grid to讓事情加快速度]（https://getbootstrap.com/examples/grid/） –