1

私は簡単な不動産のウェブサイトを作成しており、現在リストページを作成しています。これに非常によく似た製品をこちらで希望します。スケルトン フレームワークを使用しているため、コードからアイデアを得ることができません。これは私の現在の進行状況とコードまたは以下です。

2つの要素; 物件の写真と本文が離れています（途中で隙間があります）。
また、ブラウザのサイズを変更すると、リストが想定どおりに垂直の長方形としてレンダリングされません。

私の生の質問は次のとおりです
。1）画像と本文テキストをどのように接続して、間にスペースがないようにしますか？

2) 本文テキストを写真の下に折りたたむ必要がある場合、本文テキストと画像を同じ幅にするにはどうすればよいですか? （ブラウザや端末のリサイズ時）

HTML

    <div class="five columns image">
  <a href="Properties/9-Walter-Street-Claremont/Walter-Street.html"><img src="Properties/9-Walter-Street-Claremont/Listing.jpg" alt="Listing"></a>
</div>
<div class="ten columns body-info">
  <h2><a href="Properties/9-Walter-Street-Claremont/Walter-Street.html">Walter Street <span>$2500/wk</span></a></h2>
  <h3>Claremont, 6010</h3>
  <p>Lorem Ipsum</p>
  <div class="info">
    <ul>
      <li><img src="img/bedrooms.png"> 5</li>
      <li><img src="img/bathrooms.png"> 3</li>
    </ul>
  </div>
</div>

CSS

   .body-info  {
    background-color: #fff;
    height: 200px;
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    padding: 0px;
}
.image a img:hover {
background-color: rgba(0,0,0,0.5);
background-image: url("img/eye.png");
background-position: center center;
background-repeat: no-repeat;
} 
.body-info h2 a {
    transition: color 0.2s ease-in;
    -webkit-transition: color 0.2s ease-in;
    color: #428f9c;
    font-size: 23px;
    font-weight: normal;
}
.image {
    width: 270px;
    float: left;
}
.body-info {
    margin-left: 280px;
}
.body-info h2 a:hover {
    color: #0b7587;
}
.body-info span {
    margin-right: 15px;
    color: #444;
}
.body-info p {
    color: #777;
    font-size: 16px;
}
.body-info ul {
    list-style: none;
}
.body-info ul li {
    color: #777;
}

前もって感謝します！

4

1 に答える 1

0

途中で少し役立つように、@mediaon CSS を使用できます。

これにより、たとえば画面が特定の幅よりも小さい場合にスタイルを変更できます。

HTML:

<div class="wrap">
    <div class="image">img</div>
    <div class="info">info</div>
</div>

CSS:

.wrap {
    background: gray;
    min-height: 200px;
    padding: 10px;
}
.image {
    width: 270px;
    height: 180px;
    background: lightgray;
    display: inline-block;
}
.info {
    background: lightsteelblue;
    display: inline-block;
}
@media only screen and (max-width:600px){
    .image, .info {
        width: 100%;
        display: block;
    }
}

したがって、スタイルが表示されるフルスクリーンがあり、.image互いに隣り.info合ってdisplay: inline-block;いる場合(block

JSFiddle DEMO

投稿の例を参照すると、画面が小さくなったときに画像のサイズを変更するスクリプトを作成または検索するだけで済みます。

これがお役に立てば幸いです。

于 2013-07-15T06:57:48.363 に答える