Question

我的网站上有一个图片库。所有图片都有描述。

我想知道是否有任何方法可以使这些图像响应，并且当屏幕处于移动尺寸说明时移动到图像的左侧。

正如您在正常模式说明中所见，

1列表项目位于图像下方。

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="img_fjords.jpg">
    <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
</body>
</html>

任何想法？

Answer 1

喜欢这个

<div class="row">
<div class="col-md-6">
<a target="_blank" href="img_fjords.jpg">
    <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
  </a>
</div>
<div class="col-md-6">
<div class="desc">Add a description of the image here</div>
</div>

Answer 2

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="col-sm-6 col-lg-6 col-xm-6 col-md-6" class="img">
  <a target="_blank" href="img_fjords.jpg">
    <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200" class="img-responsive"><!--- there if you call class img-responsive then automatic image resize according to devices-->
  </a>
  <div class="col-sm-6 col-lg-6 col-xm-6 col-md-6" class="desc">Add a description of the image here</div>
</div>
</body>
</html>

＆＃13;

Answer 3

您可以使用CSS的@media查询来检测移动设备。将以下代码添加到样式中：

@media screen and (max-width: 640px) {

  div.img {
    width: 100%;
  }

  div.img img {
    width: 35%;
    float: left;
  }

  div.desc {
    width: 65%;
    box-sizing: border-box;
    float: left;
  }

}

将元视口标记添加到head：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, shrink-to-fit=no">

我尝试过，效果很好。

带有说明

3 个答案: