Question

所以我this变成了this。我想要的是无论你放大多远（或你的浏览器尺寸是什么），布局都是一样的。

我将html代码放在＆lt; section＆gt;内它们基本上就是这个：

<div class='wrap'>
    <img class='tilesetsmall' src ='images/sample.jpg'>
  <div class='ontop'><p class='example-text'>Overlay Test text </p></div>
</div>

css是：

.ontop{
    background-color: orange;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    /*top: 0;
    left: 0;*/
    display:none;
    opacity:0.8;
    margin-left:10px;
  margin-right:10px;  
}
 .tilesetsmall{
    width:300px;
    height:350px;
    display:inline-block;
    float:left;
    position: relative;
     margin-left:10px;
  margin-right:10px;  

  }
.wrap{
  position: relative; 
  width:300px;
  height:350px; 
  display:inline-block;
  float:left;
  margin-right:10px;    
  margin-top:10px;
}

对于较长和较大的方形图块，我只需更改宽度和高度并创建一个新类，例如.wraplong仅.long，宽度增加310以上。：

.wraplong{
  position:relative;
  width:610px;
  height:350px;
  display:inline-block;
  float:left;
  margin-right: 10px;
  margin-top:10px;
}

然后我使用相同的html但使用.wraplong而不是换行。我对.tilesetsmall和.ontop执行相同操作，并在html中再次替换。

如何制作以使布局保持不变？我可以让<body>拥有max-width:1900px，但我不认为这是正确的做法。

当我放大和缩小时，我的平铺式地铁风格布局变得杂乱无章

0 个答案: