ループオブジェクト用のスタイリング

Question

添付画像のデザインをCSSで実現したい。私はフロントエンドの開発を学んでいるバックエンドの人です。

私はまた、プロジェクトでブートストラップを使用しています。私は '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でブラウザで下記のスクリーンショットのように見えます。

しかし、私はそれが適切に合わせ、以下のスクリーンショットのようになりたいです。あなたの<img>要素の横に

Answer 1

、他のすべてのコンテナがブロック要素であり、そのためには、可能な幅の100％を占めます。

隣同士に滞在するブロック要素を取得するには、次の2つのことを行う必要があります：

1. まず、その合計の幅はもうできなくなりますので、より少ないスペースを取るためにそれらのそれぞれを設定します100％以上。
2. 第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