Wie verschachtelte p-Tags in CSS- und Bootstrap-Boxen verwendet werden?

Question

Dies ist das Bild, das ich habe:

Ich bin nicht sicher, wie der Text Lieu tun machen, Suchy, Prix, CHF 2'250, wie in Bild ausrichten zu sein. Und weil ich auch Bootstrap neu bin, möchte ich wissen, ob das, was ich getan habe, korrekt ist.

.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

Markup gegeben, der einfachste Weg ist es, das span Element innerhalb dieser Mutter p Elemente zu schweben:

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

JSFiddle

Oder verwenden Schopf aus dem Sumpf .pull-right Klasse:

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

Answer 2

Fügen Sie einfach float:right zu Ihrem span tag, die innerhalb p tag platziert wird. Sie können auch einen Abstand zwischen und span mit pseudo element erreichen oder indem Sie span tagclass zuweisen.

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