Question

我尝试过类似问题的许多解决方案，但它们似乎无法在我的页面上运行。这是我想要扩展的代码。还有一个薄，在gif下面我想每行保留3个盒子，因为当我去一个更大的窗口大小时，其中一个盒子向上移动。

<hmtl>
<body>



<style>



* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}

.item {
position: relative;
float:left;
border: 0px solid #333;
margin: 0%;
overflow: hidden;
width: 425px;
}
.item img {
max-width: 100%;

-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

</style>


<div class=“main”>

<img src="http://i.imgur.com/PbeUJ56.gif” style="position:absolute; top:0; left:0;" alt=“DESCRIPTION” height=“1280” width=“645”/>




<img src="http://imgur.com/JBWbug1.png" style="position:absolute; top:0; left:0;" alt=“DESCRITPION” height=“2000” width=“720” alt="" usemap="#Map" /><map name="Map" id="Map">
<area alt="" title="" href="" shape="poly" coords="208,42,47,41,41,132,211,132" />
<area alt="" title="" href="" shape="poly" coords="467,73,467,98,654,99,654,74" />
<area alt="" title="" href=" shape="poly" coords="683,73,685,98,855,97,855,77" />
<area alt="" title="" href="" shape="poly" coords="883,71,883,97,986,96,986,77" />
<area alt="" title="" href="" shape="poly" coords="1007,69,1007,95,1092,95,1091,79"/>
<area alt="" title="" href="" shape="poly" coords="1122,71,1122,100,1230,99,1230,71" /> </map>





<div id="zoom">

<div class="item">
<a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img">
</div>

<div class="item">
<a href=""><img src="http://imgur.com/zMVcoiJ.png" alt="img">
</div>

<div class="item">
<a href=""><img src="http://imgur.com/aVdSekS.png” alt="img" >
</div>

<div class="item">
<a href=""><img src="http://imgur.com/MKjyo1I.png” alt="img" >
</div>

<div class="item">
<a href=""><img src="http://imgur.com/tpYHlOP.png” alt="img" >
</div>

<div class="item">
<a href=""><img src="http://imgur.com/kzy9T7h.png” alt="img" >
</div>

</div>
</div>



<html>
<body>

Answer 1

要使其“缩放”或“按照您的意愿做出回应，您需要使其具有响应性。因此，不要使用像素（“px”）设置宽度，而是使用百分比（“％”）。

所以改变你的“.item”css就像这样：

        .item {
            position: relative;
            float: left;
            border: 0 solid #333;
            margin: 0;
            overflow: hidden;
            width: 33.3%;
            max-width: 425px;
        }

然后您还必须适当地更改主图像。但是从你的代码来看，似乎你可能试图在你走之前跑步......从小开始学习网页设计和开发的基础并在那里建立，例如：

不要这样做

  * {
    //...
  }

而是根据您的要求执行此操作：

.main div{
   //...
 }

除非必须这样做，否则不要使用内嵌样式，所以这是不好的做法：

style="position:absolute; top:0; left:0;"

所有“结束标记”必须具有正斜杠，如下所示：

</body>

不是

<body>

关闭你的锚标签：

<a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img"></a>

不是这个：

<a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img">

建议（＆lt; = HTML4 = required）将样式标记放在“head”元素而不是“body”元素中...

搜索一些教程，（css，html），然后一旦你感到舒服，找到一些关于“响应式网页设计”的教程，了解一下引导程序和相似之处......一旦你知道这些东西（这并不难） - 你将很好地设计一个外观漂亮的响应式网站。

希望这可以帮助你...

Answer 2

我理解你的问题。我已经使用CSS Flexbox修复了格式问题。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我在425px处添加了媒体查询，以支持除网格之外的列布局。

您的代码中有一些小错误： 1）关闭html和body标签的顺序相反，需要正斜杠才能关闭。 2）这个HTML文档中没有“head”，所以我添加了一个并将CSS移入其中。 3）虽然不是必需的，但你应该结束使用正斜杠/自动关闭HTML标签，例如img标签。 4）'a'标签需要关闭标签。这是工作代码：

<hmtl>
  <head>
  <style>
  * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
  .item {
  position: relative;
  float:left;
  border: 0px solid #333;
  margin: 0%;
  overflow: hidden;
  width: 425px;
  }
  .item img {
  max-width: 100%;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
  }
  .item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  }
  .row-1, .row-2 {
    display: flex;   /* This is the fix for the item formatting problem */
    flex-direction: row;
  }
  @media screen and (max-width: 425px) {
    .row-1, .row-2 {
      display: flex;
      flex-direction: column;
    }
  }
  </style>
  </head>
  <body>
  <div class=“main”>
    <img src="http://i.imgur.com/PbeUJ56.gif” style="position:absolute; top:0; left:0;" alt=“DESCRIPTION” height=“1280” width=“645”/>
    <img src="http://imgur.com/JBWbug1.png" style="position:absolute; top:0; left:0;" alt=“DESCRITPION” height=“2000” width=“720” alt="" usemap="#Map" />
    <map name="Map" id="Map">
      <area alt="" title="" href="" shape="poly" coords="208,42,47,41,41,132,211,132" />
      <area alt="" title="" href="" shape="poly" coords="467,73,467,98,654,99,654,74" />
      <area alt="" title="" href=" shape="poly" coords="683,73,685,98,855,97,855,77" />
      <area alt="" title="" href="" shape="poly" coords="883,71,883,97,986,96,986,77" />
      <area alt="" title="" href="" shape="poly" coords="1007,69,1007,95,1092,95,1091,79"/>
      <area alt="" title="" href="" shape="poly" coords="1122,71,1122,100,1230,99,1230,71" />
    </map>
    <div id="zoom">
      <div class="row-1">
        <div class="item">
        <a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img" /></a>
        </div>
        <div class="item">
        <a href=""><img src="http://imgur.com/zMVcoiJ.png" alt="img" /></a>
        </div>
        <div class="item">
        <a href=""><img src="http://imgur.com/aVdSekS.png” alt="img" /></a>
        </div>
      </div>
      <div class='row-2'>
        <div class="item">
        <a href=""><img src="http://imgur.com/MKjyo1I.png” alt="img" /></a>
        </div>
        <div class="item">
        <a href=""><img src="http://imgur.com/tpYHlOP.png” alt="img" /></a>
        </div>
        <div class="item">
        <a href=""><img src="http://imgur.com/kzy9T7h.png” alt="img" /></a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

希望这会有所帮助。快乐的编码。

Answer 3

最终结果：https://jsfiddle.net/Varinder/8fmkg4bq/

要记住的关键事项之一是如果你想让它变得流畅（响应），尽量不给任何元素赋予固定的宽度或高度

所以，我继续从标记中的图片代码中删除了width和height属性

为了使图像标签流畅，添加了这个css规则：

img {
    max-width: 100%;
}

第一张图片（gif）可以用作背景图片吗？因此，提前并向background容器添加.main属性

这使得第二张图片（png）很好地覆盖在顶部

现在png图像被重叠并且流畅。图像映射区域都不合适，使用responsive image maps plugin

进行修复

关于底部瓷砖始终是流体并确保每行只有3个瓷砖 - 添加width: 33% 100/3

希望这会有所帮助☮

如何将此代码扩展到不同的窗口大小？

3 个答案: