Question

我遇到了一个我不太了解的问题。我希望有人会指出我在哪里犯了错误，所以我可以解决它。 Page在手机和桌面上工作正常但是当我在桌面版上执行这些步骤时，我的顶角不会自动移动到上角。

我手动将窗口调整到非常小（调整大小没问题）
我点击按钮再次变大（调整大小没问题）
我点击按钮使其立即变小，我的上角图像不会立即跳到上角。如果我只是在任何方向调整px的大小，角落会跳到角落。

Html图片 T-R

你可以看到角落不会移动到想要的位置Picture

我的HTML：

＆＃13;

/* I have another css for small devices, but it's same except instead of 32px is 21px */

body{
   font-family: Ubuntu, sans-serif;
   background: #f0e3df url("../img/page_border_line_top.png") repeat-x left top
}

#wrapper{
   position:absolute;
   bottom:0;
   min-width: 100%;
   max-height: 100%;
   background: transparent url("../img/page_border_line_bottom.png") repeat-x left bottom;
}

#border_left{
  float:left;
  width:32px;
  height:100%;
  background: transparent url("../img/page_border_line_left.png") repeat-y right bottom;
  margin:0;
  top:0;
  left:0;
  bottom:0;
}

#border_right{
  float:right;
  width:32px;
  height:100%;
  background: transparent url("../img/page_border_line_right.png") repeat-y right bottom;
  margin:0;
  top:0;
  right:0;
  bottom:0;
} 

#TL, #TR{
  position: absolute;
  top:0;
  bottom:auto;
  padding:0;
  margin:0;
  height:32px;
  width:32px;
}

#BL, #BR{
  position: absolute;
  bottom:0;
  top:auto;
  padding:0;
  margin:0;
  height:32px;
  width:32px;
}

＆＃13;

<div id="wrapper">
  <div id="border_left">
    <img alt="corner top left" id="TL" src="img/page_border_corner_T-L.png" />
    <img alt="corner bottom left" id="BL" src="img/page_border_corner_B-L.png" />
  </div>

  <div id="border_right">
    <img alt="corner top right" id="TR" src="img/page_border_corner_T-R.png" />
    <img alt="corner bottom right" id="BR" src="img/page_border_corner_B-R.png" />
  </div>
</div>

＆＃13;

感谢您提供任何帮助！

Answer 1

好的，没关系，我觉得它不是很好的练习我所拥有的所以我在搜索互联网之后用3x3网格制作了新的CSS。

现在我只有问题告诉CSS中间div（实际内容）应该在边缘内伸展。

调整窗口大小时，角落图像不会移动到角落

1 个答案: