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

Question

这是我的形象：

我不知道该怎么做使文本寮，苏希，大奖赛，CHF 2'250是对准像图像。而且因为我也是新手，所以我想知道我做的是否正确。

.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元素p元素：

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

JSFiddle

或者使用白手起家.pull-right类：

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

Answer 2

只需添加float:right您span tag其放在里面p tag。您甚至可以使用pseudo element来实现p和span之间的间距，也可以将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>