浮動DIV適合另一個DIV

Question

我需要得到它，因此包含日期的div位於full_card div的頂部並擴展到卡的整個寬度。目前它低得多，不能擴展全寬。

p { 
 
    font-weight: bold; 
 
    font-family: Arial; 
 
} 
 

 
#container { 
 
    width: full; 
 
} 
 

 
.full_card { 
 
    float: left; 
 
    background-color: #d1ccff; 
 
    border-radius: 25px; 
 
    border: 5px solid #404266; 
 
    margin: 10px; 
 
    padding: 10px 30px 10px 30px; 
 
    width: 150px; 
 
    height: 250px; 
 
} 
 

 
#event { 
 
    font-size: 18px; 
 
    font-style: italic; 
 
    color: white; 
 
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
 
} 
 

 
#tag { 
 
    font-size: 18px; 
 
    text-align: center; 
 
    color: #000; 
 
} 
 

 
.date_back { 
 
    background-color: #404266; 
 
    border-radius: 25px 25px 0px 0px; 
 
    min-width: 150px; 
 
    height: 40px; 
 
} 
 

 
#date { 
 
    font-size: 26px; 
 
    text-align: center; 
 
    color: #fff; 
 
}

<div id="container"> 
 
    <div class="full_card"> 
 
    <div class="date_back"> 
 
     <p id="date">1981</p> 
 
    </div> 
 
    <p id="event">Voldemort murders Lily and James Potter</p> 
 
    <hr> 
 
    <p id="tag">Harry Potter</p> 
 
    </div> 
 
</div>

Answer 1

修改你的代碼向您展示如何做到這一點。

1. 在它裏面的.full_card元素影響的一切，包括紫色日期「選項卡上的」 padding。我評論了這個填充，所以這個標籤不會被推下來。
2. 默認情況下，<p>元素的頂部和底部有margin。如果你不需要，你需要重寫這個 - 我加了margin: 0;來阻止#date元素向下移動。
3. 由於我們（從兩側30px）中除去在步驟1中填充，予加寬度的60px到.full_card元件將其帶到210px寬，然後加入填充30px到側面的#event元件內部。
4. 要得到邊界半徑的紫色元素上正常工作，我加入overflow: hidden到.full_card（以「微調」內部形狀的任何東西），並刪除不需要的border-radius那是.date_back元素。

希望這有助於！

p { 
 
    font-weight: bold; 
 
    font-family: Arial; 
 
} 
 

 
#container { 
 
    width: full; 
 
} 
 

 
.full_card { 
 
    float: left; 
 
    background-color: #d1ccff; 
 
    border-radius: 25px; 
 
    border: 5px solid #404266; 
 
    margin: 10px; 
 
    /*padding: 10px 30px; */ 
 
    width: 210px; /* added 60px */ 
 
    height: 250px; 
 
    overflow: hidden; /* added this for radius */ 
 
} 
 

 
#event { 
 
    font-size: 18px; 
 
    font-style: italic; 
 
    color: white; 
 
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
 
    padding: 0 30px; /* added this */ 
 
} 
 

 
#tag { 
 
    font-size: 18px; 
 
    text-align: center; 
 
    color: #000; 
 
} 
 

 
.date_back { 
 
    background-color: #404266; 
 
    /* border-radius: 25px 25px 0px 0px; */ 
 
    min-width: 150px; 
 
    height: 40px; 
 
} 
 

 
#date { 
 
    font-size: 26px; 
 
    text-align: center; 
 
    color: #fff; 
 
    margin: 0; /* added this */ 
 
}

<div id="container"> 
 
    <div class="full_card"> 
 
    <div class="date_back"> 
 
     <p id="date">1981</p> 
 
    </div> 
 
    <p id="event">Voldemort murders Lily and James Potter</p> 
 
    <hr> 
 
    <p id="tag">Harry Potter</p> 
 
    </div> 
 
</div>