造型为循环对象

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

如果您在使用引导计划，您可以通过使用他们的柱网布局，例如实现，很容易