css - 连接两个元素保持响应值

Question

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

两个元素；属性(property)照片和正文是分开的(中间有一个空隙)。
此外，如果您调整浏览器的大小，列表不会像预期的那样呈现为垂直矩形。

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

JSFiddle DEMO

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

希望对您有所帮助。