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

【问题标题】：Connect two elements keeping responsive value连接两个保持响应值的元素
【发布时间】：2013-07-15 14:57:48
【问题描述】：

我正在创建一个简单的房地产网站，目前正在创建列表页面。我想要一个与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;
}

提前谢谢你！

【问题讨论】：

标签： css html

【解决方案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 的 display 属性将更改为 block，使它们显示在彼此下方。

JSFiddle DEMO

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

希望这对您有所帮助。

【讨论】：