Question

我有一张桌子应该放在我网站主页上的图片下面。它在大多数计算机上看起来很棒，但在一些较小的屏幕上，表格与图像重叠。我可以继续把桌子推下来，只是让它在更大的屏幕上变得更糟。有没有办法设置定位，所以在图像下总是有一定的百分比？或者沿着这些方面的其他东西也许。

这是图像和表格的css：

#headshot{
position: fixed;
top: 16.5%;
left: 50%;
margin-left: -200px;
}

#outline {
border:0px;
align:center;
position: absolute;
top: 65%;
left: 25%;
}

Answer 1

从我可以从你的jsfiddle看到的，你想要将图像置于中心位置（align: center;是无效的css）并将表放在它后面。我需要说你的html非常混乱，将事物与<h1>Something</h2>和similars结合起来，这是无效的html。我建议您尝试w3 html validator以确保代码清晰。

那就是说，这是你工作的jsfiddle：

<强> http://jsfiddle.net/B6KqD/1/

我添加了一个包装器并将css更改为：

#wrapper {
    margin: 16.5% auto 0;
}
#outline {
    border:0px;
    margin: 20px auto 0;
}
h1 {
    font-family: title;
    font-size: 20pt;
    letter-spacing: 1px;
    text-align: center;
}
h2 {
    font-family: title;
    font-size: 40pt;
    letter-spacing: 1px;
    text-align: center;
}
@font-face {
    font-family: title;
    src: url(http://nickgertler.com/resources/champagnelimousines.woff);
    font-weigt: 100;
}

Answer 2

如果它只是屏幕大小，您可以使用CSS3媒体查询属性

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

  table {

  ..property..
  }
}

从重叠图像停止表

2 个答案: