循环对象的样式

Question

我想用 css 实现附图中的设计。我是一名正在尝试学习前端开发的后端人员。

我也在项目中使用引导程序。我尝试使用“位置：相对”，但它不起作用。

我正在用 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. 其次，将它们浮动到左侧，以便它们实际上位于同一“行”上。

如果您打算使用 Bootstrap，您可以通过使用它们的柱状网格布局轻松实现，例如：

<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