造型爲循環對象

Question

我想實現在附加圖像與CSS的設計。我是一個試圖學習前端開發的後端人。

我也在項目中使用bootstrap。我嘗試使用「位置：相對」，但它不起作用。

我在Django建設網站。

HTML

{% if hots %} 
{% for hot in hots %} 

    <img class="kown-image" src="{{hot.main_photo.url}}" width="300px" height="200px" /> 

<p class="kown-prop"> <a href="{{ hot.get_absolute_url }}">{{ hot.name }}</a> </p> 

<p class="kown-cit"> {{ hot.city}},{{hot.country}}</p> 

    {% with hot.motel_hr.first as md %} 
        {% if md %} 
        <p class="kown-cp"> From {{hot.user.user.currency}}{{ md.room_price }}/night </p> 
        <p class="kown-cop"> <a href="#">Buy Now</a></p> 
      {% else %} 
        <p> no price found </p> 

      {% endif %} 
     {% endwith %} 
     {% endfor %} 


<p class="kown-down-line"> </p>  
<p> <a href="{% url 'haystack_search' %}?q={{query_string}}"/>See More Places </a></p> 
{% endif %} 
</div> 

CSS

.kown-hotel{ 
    background-color:white; 
    margin-top:10px; 
    margin-left:50px; 
    } 

.kown-image { 
    width: 300px; 
    height: 200px; 
    padding-bottom: 70px; 
    border-bottom: 1px solid black; 
} 

.kown-prop { 
    display:inline; 
    vertical-align:top; 
    padding-left:10px; 
    width: 600px; 
    height: 50px; 
    background-color:green; 
} 

.kown-cit { 
    background-color:black; 
    width: 300px; 
    margin-left: 305px; 
    margin-top: -100px; 
    } 

    .kown-cp { 
     float:right; 
     margin-top: -90px; 
    } 

    .kown-cop { 
     float:right; 
     margin-top: -70px; 
    } 

它看起來像在我寫的CSS瀏覽器下面的截圖。

但我希望它正確對齊，看起來像下面的截圖。

Answer 1

除了您<img>元件，所有的其它容器是塊元件，並且爲此佔用可用寬度的100％。

爲了讓塊元素留彼此相鄰，你需要做兩件事情：

1. 首先，設置他們每個人佔用空間少，所以他們的總寬度將不再有比100％。
2. 其次，將它們浮動到左邊，以便它們實際上位於同一「行」上。

   <div class="col-xs-3"> 
       <img src="..."/> 
   </div> 
   <div class="col-xs-3"> 
       <p>Address</p> 
       <p>Address</p> 
       <p>Address</p> 
   </div> 
   <div class="col-xs-3"> 
       <button>Buy now</button> 
   </div> 
   

   瞭解更多關於如何使用引導程序的網格佈局在這裏： http://getbootstrap.com/css/#grid

如果您在使用引導計劃，您可以通過使用他們的柱網布局，例如實現，很容易