Question

我正在创建一个简单的房地产网站，目前正在创建列表页面。我想要一个与此here非常相似的产品。我无法从代码中获取想法，因为我使用的是skeleton framework。这是我的current progress and code或以下。

这两个要素;属性和文本正文的照片是分开的（中间有一个间隙）。
而且，如果你调整浏览器的大小，列表也不会像它应该那样呈现为垂直矩形。

我的原始问题是：
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;
}

提前谢谢！

Answer 1

为了帮助您一点点，您可以在CSS上使用@media。

使用它可以在例如屏幕小于特定宽度时更改样式。

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，显示属性将更改为block，使它们显示在彼此之下。

<强> JSFiddle DEMO

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

希望这会对你有所帮助。

连接两个保持响应价值的元素

1 个答案: