Question

我有一个CSS问题，我有一个名为'current-property'的div，在这个div中，我有一个段落。我想要做的是在任何时候元素底部的这个段落。这可能吗？

.current-property {
  padding: 50px 0px 50px 0px;
  clear: both;
  min-height: 460px;
}
.current-property p {
  float: left;
  padding-left: 50px;
}
p {
  text-align: left;
  font-size: 18px !important;
  font-weight: 400;
  padding: 10px 0px;
  color: #333;
  line-height: 1.8;
}

.current-property img {
    float: left;
    width: 28%;
}

.current-property h2 {
    float: left;
    width: 60%;
    text-align: left;
    padding-left: 50px;
    font-size: 32px;
}
.current-property ul {
    padding-left: 80px;
    list-style-type: disc;
    padding-top: 10px;
}
.current-property ul li {
    padding-bottom: 10px;
}

<div class="current-property">
  <img src="images/commercial/default-image.png" class="animated" data-animation="fadeInLeft" data-animation-delay="300" />
  <h2>123 Fake Street</h2>
  <div class="property-info">
    <ul>
      <li>Location: Oakland</li>
      <li>Up to 22,000 Sq. Ft.</li>
    </ul>
    <p>Call for Availability: 555-555-5555</p>
  </div>
</div>

Answer 1

你可以通过定位来做到这一点。将div上的位置设置为relative，并在段落上设置绝对值（添加背景颜色以显示div的空间）。

.current-property {
  padding: 50px 0px 50px 0px;
  clear: both;
  min-height: 460px;
  background: #ccc;
  position: relative;
}
.current-property p {
  float: left;
  padding-left: 50px;
  position: absolute;
  bottom: 0;
}
p {
  text-align: left;
  font-size: 18px !important;
  font-weight: 400;
  padding: 10px 0px;
  color: #333;
  line-height: 1.8;
}

<div class="current-property">
  <img src="images/commercial/default-image.png" class="animated" data-animation="fadeInLeft" data-animation-delay="300" />
  <h2>123 Fake Street</h2>
  <div class="property-info">
    <ul>
      <li>Location: Oakland</li>
      <li>Up to 22,000 Sq. Ft.</li>
    </ul>
    <p>Call for Availability: 555-555-5555</p>
  </div>
</div>

Answer 2

如果我了解您的问题，您只需将display:block添加到.property-info p，就像这样：

.property-info p {display:block;}

这可以确保它占据屏幕的整个宽度，并且没有任何元素float或inline。

修改

将其添加到p代码

CSS在元素的底部有段落

2 个答案: