這是我的形象:如何在CSS和Bootstrap框中使用嵌套的p標籤?
我不知道該怎麼做使文本寮,蘇希,大獎賽,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>
你不能嵌套'p'標籤 – Pete