Question

我有这个CSS，它将自动搜索结果设为div。

我遇到的问题是，当您在分辨率等于或低于1280 x 1024的屏幕上预览时，它会将div放置在我想要的位置，但如果在不同的屏幕上预览，分辨率为1680 x 1050它将搜索结果放在页面的另一侧。

我正在CSS的left侧玩，我将其更改为与屏幕尺寸1680 x 1050相匹配，将其放置在我想要的位置，然后在1280 x 1024的屏幕尺寸上将其放置在某处其他

有没有办法可以重写它来修复我想要的位置而不管屏幕分辨率如何？

＆＃13;

body {
  font-family:Tahoma, Geneva, sans-serif;
  font-size:18px;
}
.content{
  width:900px;
  margin:0 auto;
}
#searchid
{

  width:500px;
  border:solid 1px #000;
  padding:10px;
  font-size:14px;
}
#result
{
  position: fixed;
  width: 500px;
  padding: 10px;
  display: none;
  margin-top: -1px;
  border-top: 0px;
  overflow: visible;
  border: 1px #CCC solid;
  background-color: white;
  z-index: 100;
  left: 54%;
  top: 45px;
}
.show
{
  padding:10px; 
  border-bottom:1px #999 dashed;
  font-size:15px; 
  height:50px;
  z-index:50;

}
.show:hover
{
  color: #FFF;
  cursor: pointer;
  background-color: #F6F6F6;
}
.image_new {
  float: none;
  height: 220px;
  width: 220px;
  clear: both;
  overflow: visible;
  position: absolute;
  visibility: visible;
}
.live {
  position: fixed;
  visibility: visible;
  clip: rect(auto,auto,auto,auto);
}

＆＃13;

 <input name="search" type="text" class="search" id="searchid" placeholder="Search..." autocomplete="off" />
 <input name="button" type="submit" class="btn-style" id="button" value="Search" />

＆＃13;

Answer 1

为了根据屏幕分辨率更改网页，您必须使用＆＃39; liquid＆＃39;布局，这意味着您可以指定百分比值，而不是指定像素值。这可以通过计算您希望每个元素占用多少屏幕并输入相应的百分比值而不是原始像素值来完成。

在屏幕尺寸上修复div的位置

1 个答案: