Fatal编程技术网
  • javascript/
  • Javascript 绝望的图像定位问题

Javascript 绝望的图像定位问题

javascript html css

Javascript 绝望的图像定位问题,javascript,html,css,Javascript,Html,Css,我想要的是： 编辑：添加了一个我正在尝试做的更全面的图片。我可以使用绝对定位使它看起来正确，但是当窗口太小时，内容会在没有水平滚动条的情况下滑出页面。这就是为什么我想对div使用相对定位。再次感谢 我只知道如何使用绝对定位的div来实现这一点，但是当窗口太小时，绝对div中的内容会从页面上滑下。基本上，图像垂直居中，并在屏幕的左半部分右对齐。如果窗口太小，我宁愿有一个水平滚动条，也不愿丢失部分图像 任何帮助都将不胜感激 迈克 只要定义了图像的宽度和高度，它就可以进行绝对或相对定位 更新您最近的编

我想要的是：

编辑：添加了一个我正在尝试做的更全面的图片。我可以使用绝对定位使它看起来正确，但是当窗口太小时，内容会在没有水平滚动条的情况下滑出页面。这就是为什么我想对div使用相对定位。再次感谢

我只知道如何使用绝对定位的div来实现这一点，但是当窗口太小时，绝对div中的内容会从页面上滑下。基本上，图像垂直居中，并在屏幕的左半部分右对齐。如果窗口太小，我宁愿有一个水平滚动条，也不愿丢失部分图像

任何帮助都将不胜感激

迈克

只要定义了图像的宽度和高度，它就可以进行绝对或相对定位

更新您最近的编辑 问题是您需要使用相对定位。您还应该为图像和边栏设置一个container DIV，因为它们在仅将body作为父对象的情况下仍然会错误地执行操作

然后，您需要容器div上的最小宽度，设置为您在较新的图像中所示的最小宽度。这些东西加在一起会给你想要的

请注意，边栏内容需要在我将发布的代码中使用不同的边距。我不知道为什么，因为我对CSS有点生疏，但现在两者都是相对定位的，如果侧边栏内容上没有负边距，则侧边栏的顶部将与图像的底部对齐。我知道边距顶部：-256px将使其与图像顶部对齐。然后，要使它们垂直居中，您需要将它们的差值的一半或256-400/2相加，这样您就可以将-72px加到-256px的边距上，使它们再次居中

以下是对我有效的代码：

<html>
<head>
<title>Title</title>

<style>

body {
  margin: 0;
}

#container {
  background: #DDD;
  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 900px;
}

img#image {
  position: relative;
  left: 50%;
  top: 50%;
  margin: -128px 0 0 -432px;
  background: black;
  display: block;
}

div#sidebar {
  position: relative;
  left: 50%;
  top: 50%;
  margin: -328px 0 0 0;
  width: 368px;
  height: 400px;
  background: grey;
}

.footer {
  color: #202054;
  text-align: left;
  font-size: 12px;
  text-decoration: none;
  margin-left: 20px;
}

a { border: 0px; text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }

span { text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }

a.footer:hover {
  color: #EE001E;
  text-decoration: underline;
}
</style>

</head>
<body>

<div id="container">

    <img id="image" src="" width="432" height="256"/>

    <div id="sidebar" style="">
      <!-- text content -->
      content
    </div>

</div>

<div style="position: absolute; width: 100%; height: 20px; bottom: 20px;">
  <a style="text-decoration: none;" href="http://www.company.com" >
    <img class="footer" src="" alt="company" width="21" height="13" />
  </a>
  <a class="footer" href="#">Terms of Use</a>
  <a class="footer" href="#">Privacy Policy</a>
  <span class="footer" style="color: #7E7E7E;">Copyright &#169; 2009 Company Inc. All rights reserved.</span>
</div>


</body>

</html>
注意：我添加了颜色来帮助我前进，而且我发现您必须将display:block添加到图像中

希望这有帮助

注意：最小宽度值是任意的。它只需要大于两个元素的宽度。您可能想四处看看，看看边栏开始从页面上掉下来的宽度。在浏览器中，向右剪裁是不可避免的。我想您可能需要这样的东西：

<div style="width:50%; height:100%; position:absolute; text-align:right; overflow:auto"> <img src='...'> </div>
但要使图像垂直居中，您需要将其放入表格或使用JavaScript。

似乎不需要绝对定位，但如果可能，请同时显示其他内容和网格线。这个问题似乎是他之前在这里提出的问题的延续：tinyurl.com/swarts1，由于链接格式的原因，这可能有助于了解问题的历史。是的，这是我以前问题的延续。我已经添加了代码，所以不需要查看旧帖子。此外，还有一个更明确的布局图像，我链接到。有了这些信息，您知道这种布局是否可行吗？我尝试使用全屏div容器和溢出来解决这个问题，但没有成功。这是代码：。图表{宽度：432px；高度：256px；位置：绝对；顶部：50%；左侧：50%；边距：-128px 0-432px；溢出：自动；显示：块；}我将很快更新下面的答案。谢谢你更新信息。不是真的。您可以使用css垂直居中。只是不简单。正如我在回答中所说，如果你有元素的高度/宽度，你可以垂直居中，他就是这样做的。我不确定这是否是cdm9002所指的，或者他所说的是表格单元格显示属性等。希望你能帮忙！好的，更新了。图像不再从页面左侧脱落。感谢您的回复。我没能让它工作。还好，只是没有垂直居中。图像和文本div的上半部分都被切掉了。排名靠前的：50%不起作用。我正在Safari 4中进行测试。有什么想法吗？我在Safari 4和我测试的每一款浏览器中，它都垂直居中。你把我的密码贴进去了吗？ <div style="width:50%; height:100%; position:absolute; text-align:right; overflow:auto"> <img src='...'> </div>