拼命的图像定位问题

Question

What I want is this: http://www.freeimagehosting.net/image.php?11b1fcb689.png 我想要的是： http : //www.freeimagehosting.net/image.php?11b1fcb689.png

Edit: Added a fuller picture of what I'm trying to do. 编辑：添加了我想要做的更完整的图片。 I can make it look right using absolute positioning, but when the window size is too small, the content slides off the page without a horizontal scrollbar. 我可以使用绝对定位使其看起来正确，但是当窗口大小太小时，内容将滑出页面而没有水平滚动条。 That's why I want to use relative positioning for the divs. 这就是为什么我要对div使用相对定位。 Thanks again. 再次感谢。 http://www.freeimagehosting.net/image.php?75c33eaf6e.png http://www.freeimagehosting.net/image.php?75c33eaf6e.png

I only know how to do this using absolutely positioned divs, but content in absolute divs will slide off the page when the window is too small. 我只知道如何使用绝对定位的div来执行此操作，但是当窗口太小时，绝对div中的内容将滑出页面。 Essentially, the image is vertically centered and aligned right on the left half of the screen. 本质上，图像垂直居中并在屏幕的左半部分右对齐。 If the window is too small, I'd rather have a horizontal scrollbar than losing part of the image. 如果窗口太小，我宁愿使用水平滚动条，也不愿丢失部分图像。

Any help would be appreciated greatly! 任何帮助将不胜感激！

Mike 麦克风

<!DOCTYPE html>
<html>
<head>
<title>Title</title>

<style>

body {
  margin: 0;
}
.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>

<img style="position: absolute; right: 50%; top: 50%; margin-top: -128px;" src="Resources/chart.png" width="432" height="256"/>

<div style="position: absolute; left: 50%; top: 50%; margin-top: -200px; width: 368px; height: 400px;">
  <!-- text content -->
</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="Resources/logo.png" 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>

Answer 1

It can work with either absolute or relative positioning as long as the image width and height are defined. 只要定义了图像的宽度和高度，它就可以在absolute或relative位置上工作。

Update for your recent edit 更新您最近的编辑

The issue is that you need to use relative positioning. 问题是您需要使用相对定位。 You should also have a container DIV for the image and the sidebar div, because they will still act incorrectly with only the body as a parent. 您还应该为图像和侧边栏div设置一个容器DIV，因为它们仍然会以主体作为父对象而错误地起作用。

You then need a min-width on the container div, set to the min-width which you illustrate in the newer image. 然后，您需要在容器div上设置一个最小宽度，并将其设置为在较新图像中说明的最小宽度。 These things together will give you what you want. 这些东西在一起会给你你想要的。

Note that the sidebar content needs a different margin in this code I'll be posting. 请注意，在我将要发布的此代码中，边栏内容需要不同的边距。 I'm not sure why because I'm a little rusty with my CSS but now that both are relative positioned, if you have no negative margin on the sidebar content, the top of it will be aligned to the bottom of the image. 我不确定为什么会这样，因为我对CSS有点生疏，但是现在两者都是relative放置的，如果侧边栏内容没有负边距，则其顶部将与图像底部对齐。 I know that margin-top: -256px will get it aligned with the top of the image. 我知道margin-top: -256px将使其与图像顶部对齐。 Then to vertically center them you need to add half of their difference or (256 - 400) / 2 , so you add -72px to the -256px margin to center them again. 然后，要使其垂直居中，您需要将其差值的一半或(256 - 400) / 2 -72px (256 - 400) / 2加上，因此，在-256px边距上添加-72px即可再次使其居中。

Here's the code that works for me: 这是对我有用的代码：

<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>

Note I added colors to help me along, and also I found that you must add display: block to the image. 注意我添加了颜色来帮助我，并且我还发现必须在图像上添加display: block 。

Hope this helps. 希望这可以帮助。

Note: The min-width value was arbitrary. 注意： min-width值是任意的。 It just needs to be greater than the width of both elements. 它只需要大于两个元素的宽度即可。 You may want to play around and see what width the sidebar starts to fall off the page (clipping to the right is unavoidable in browsers) 您可能想玩一下，看看边栏开始从页面上掉下来多少宽度（在浏览器中不可避免地向右裁剪）

Answer 2

I think you might want something like this: 我认为您可能想要这样的事情：

<div style="width:50%; height:100%; position:absolute; text-align:right; overflow:auto">
<img src='...'>
</div>

But to center image vertical you will need to put it into table or use JavaScript. 但是要使图像垂直居中，您需要将其放入表格中或使用JavaScript。

拼命的图像定位问题

问题描述

2 个解决方案

解决方案1
0

Update for your recent edit 更新您最近的编辑

解决方案2
0 2009-07-12 08:33:26

拼命的图像定位问题

问题描述

2 个解决方案

解决方案1 0

Update for your recent edit 更新您最近的编辑

解决方案2 0 2009-07-12 08:33:26

解决方案1
0

解决方案2
0 2009-07-12 08:33:26