1

我正在创建一个简单的房地产网站，目前正在创建列表页面。我想要一个与这里非常相似的产品。我无法从代码中获得灵感，因为我使用的是骨架框架。这是我目前的进度和代码或以下。

两个要素；财产照片和正文分开（中间有一个间隙）。
而且，如果您调整浏览器的大小，则列表不会像预期的那样呈现为垂直矩形。

我的原始问题是：
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;. 当屏幕调整大小并小于 600px 时，两个 div 的 display 属性将更改为block，使它们显示在彼此下方。

JSFiddle 演示

参考您帖子中的示例，您唯一需要做的就是制作或找到一个脚本，以在屏幕变小时时调整图像大小。

希望这对您有所帮助。

于 2013-07-15T06:57:48.363 回答