html - 如何在 CSS 和 Bootstrap 框中使用嵌套的 p 标签？

Question

这是我的图片:

我不确定如何使文本 Lieu, Suchy, Prix, CHF 2'250 像图像中那样对齐。而且因为我也是 Bootstrap 的新手，所以我想知道我所做的是否正确。

.boxes-images img {
  width: 100%;
}
.boxes-images h4 {
  text-align: center;
  background-color: #8C1211;
  color: #FFFFFF;
  padding: 10px 0px 10px 0px;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 0px;
}
.boxes-images .details {
  background-color: #D6D6D6;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

<div class="text-page">
  <div class="row">
    <div class="col-sm-3 boxes-images">
      <img src="images/automobile.jpg">
      <h4>IMMOBILIER</h4>
      <div class="details">
        <p>Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
        <p>Lieu<span>suchy</span>
          <p>
            <p>Prix<span>CHF 2'250</span>
            </p>
      </div>
    </div>
    <div class="col-sm-3 boxes-images">
      <img src="images/automobile.jpg">
      <h4>IMMOBILIER</h4>
      <div class="details">
        <p>Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
        <p>Lieu<span>suchy</span>
          <p>
            <p>Prix<span>CHF 2'250</span>
            </p>
      </div>
    </div>
    <div class="col-sm-3 boxes-images">
      <img src="images/automobile.jpg">
      <h4>IMMOBILIER</h4>
      <div class="details">
        <p>Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
        <p>Lieu<span>suchy</span>
          <p>
            <p>Prix<span>CHF 2'250</span>
            </p>
      </div>
    </div>
    <div class="col-sm-3 boxes-images">
      <img src="images/automobile.jpg">
      <h4>IMMOBILIER</h4>
      <div class="details">
        <p>Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
        <p>Lieu<span>suchy</span>
          <p>
            <p>Prix<span>CHF 2'250</span>
            </p>
      </div>
    </div>
    <div class="col-sm-3 boxes-images">
      <img src="images/automobile.jpg">
      <h4>IMMOBILIER</h4>
      <div class="details">
        <p>Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
        <p>Lieu<span>suchy</span>
          <p>
            <p>Prix<span>CHF 2'250</span>
            </p>
      </div>
    </div>
    <div class="col-sm-3 boxes-images">
      <img src="images/automobile.jpg">
      <h4>IMMOBILIER</h4>
      <div class="details">
        <p>Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
        <p>Lieu<span>suchy</span>
          <p>
            <p>Prix<span>CHF 2'250</span>
            </p>
      </div>
    </div>
    <div class="col-sm-3 boxes-images">
      <img src="images/automobile.jpg">
      <h4>IMMOBILIER</h4>
      <div class="details">
        <p>Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
        <p>Lieu<span>suchy</span>
          <p>
            <p>Prix<span>CHF 2'250</span>
            </p>
      </div>
    </div>
    <div class="col-sm-3 boxes-images">
      <img src="images/automobile.jpg">
      <h4>IMMOBILIER</h4>
      <div class="details">
        <p>Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
        <p>Lieu<span>suchy</span>
          <p>
            <p>Prix<span>CHF 2'250</span>
            </p>
      </div>
    </div>
  </div>
</div>

Answer 1

根据您的标记，最简单的方法是将 span 元素 float 到那些父 p 元素中:

.boxes-images .details p span{
  float: right;
}

JSFiddle

或者使用 Bootstrap .pull-right类:

.pull-right {
  float: right !important;
}