孩子不能呆在父母的div內

小提琴：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>

來源

2016-12-03 user7244979

你要三個格是單行？ – 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/） –

父母不能直接拿孩子的身高，如果孩子是absolute，因爲absolute元素從文檔流取出（如floats），所以在這種情況下，「卡」甚至不知道「content_container」連存在。

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

更新：https://jsfiddle.net/OmarIsComing/eq4L86g9/2/

解決方案，而實現Flexbox：

與Flexbox的解決方案https://jsfiddle.net/OmarIsComing/eq4L86g9/3/

來源

2016-12-03 13:02:00

感謝您的幫助。您的解決方案不會讓'black_container'div完整的高度和'content_container'採取全寬。如果你能幫助我，那會很好。 – user7244979

像這樣的東西？ https://jsfiddle.net/OmarIsComing/eq4L86g9/2/ –

謝謝....它的工作....你能給我一個清楚的想法，我們如何以及爲什麼我們使用位置絕對和位置真正的divs裏面卡。謝謝.... – user7244979

與更換.content_container CSS。簡而言之，absolute位置將元素從其他元素的流中移除;因此，它的高度將被忽略，並且永遠不會計入您的.card容器中。

來源

2016-12-03 12:57:48 Aboodz

如果flexbox是一個選項，這是很容易：

添加display: flex您card
添加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>

來源

2016-12-03 17:28:23 kukkuz

孩子不能呆在父母的div內

回答

相關問題