Styling For Loop Objects

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% доступной ширины.

Чтобы получить блочные элементы, чтобы остаться рядом друг с другом, вам нужно сделать две вещи:

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> 

Узнайте больше о том, как использовать макет сетки Bootstrap здесь: http://getbootstrap.com/css/#grid