Question

我想用css实现附图中的设计。我是一个试图学习前端发展的后端人。

我也在项目中使用bootstrap。我尝试使用'position：relative'但它不起作用。

我正在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％。

要让块元素保持彼此相邻，您需要做两件事：

首先，将它们设置为占用较少的空间，因此它们的总宽度不会超过100％。
其次，将它们浮动到左侧，这样它们实际上就会在＃34;行上＃34;。

如果您打算使用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>

在此处详细了解如何使用bootstrap的网格布局： http://getbootstrap.com/css/#grid

为循环对象设置样式

1 个答案: