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

Question

这是我的图像：

我不知道如何使文字Lieu，Suchy，Prix，CHF 2＆＃29; 250在图像中对齐。因为我也是新手，所以我想知道我所做的是否正确。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

鉴于您的标记，最简单的方法是将span元素浮动到这些父p元素中：

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

JSFiddle

或者使用bootstraps .pull-right class：

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

Answer 2

只需将float:right添加到位于span tag内的p tag即可。您甚至可以使用p或span为pseudo element分配class和span tag之间的间距。

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

/*Using Pseudo element*/

.boxes-images .details > p > span:before{
 content:'';
 margin-left:50%;
 background:#111;
}

/* Add pull-right to span tag works and you don't need to add any custom css,
as pull-right is pre-defined class of bootstrap that floats your element to right,
so add that to all your span tag too work*/

<div class="details">
<p>Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span class="pull-right">suchy</span>
<p>
   <p>Prix<span class="pull-right">CHF 2'250</span>
</p>
</div>