浮动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>