浮动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. padding元素上的.full_card影响了其中的所有内容，包括紫色日期＆＃34;标签＆＃34;。我评论了这个填充物，因此标签不会向下和向内推。
2. 默认情况下，<p>元素的顶部和底部都有margin。如果你不想要它，你需要覆盖它 - 我添加了margin: 0;来阻止#date元素向下移动。
3. 由于我们在步骤1中删除了填充（两边都是30px），因此我将60px宽度添加到.full_card元素，以使其达到210px宽，并且然后将30px填充添加到#event元素内的边。
4. 为了让border-radius在紫色元素上正常工作，我将overflow: hidden添加到.full_card（对于＆＃34;修剪＆＃34;其内部的任何形状），并删除了不需要的内容border-radius元素上的.date_back。

希望这有帮助！

＆＃13;
＆＃13;
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 */
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;