html - div 内的 CSS 图像不会改变大小

Question

我的页面上有两个 div，在这两个 div 之间有一个图像。让我进一步解释一下...

Div 1 - 这是页面的容器。 Div 2 - 包含几行文本 图像 - 只是我想要格式化的普通 jpeg 图像。

从页面的左边框开始，Div 2 占据了页面的 40%。它在我的页面上延伸得很远。因此，我的页面还剩下大约 60% 可以使用。我希望我的图像宽 200 像素，高 110 像素。由于某种原因，我的图像仅以其原始(预格式)宽度和高度显示在页面底部。我将向您展示我正在使用的代码。

HTML:

<div id="container">

  <div id="div2">
    <p> Hi SO, I hope someone can help me with this issue! </p>
  </div>

  <img id="image1" src="test.jpg" alt="" />

</div>

CSS:

#image1{
    width:200px;
    height:100px;
    position:relative;
    float:right;
}

回顾一下，我希望图像“image1”在“div2”的左边缘和页面的右边框之间对齐。所以，我希望它在两者之间居中，但当然不在我的页面上居中。

Answer 1

我认为您不想使用百分比来实现您所描述的目标。

这基本上就是你想要的:

http://jsfiddle.net/fdXHs/2/

您可以检查我的样式以了解我是如何做到的，如果您需要更全面的解释，我会发布它。

此外，您还描述了图像没有发生任何变化，这表明没有应用任何样式，请检查您的 CSS 标记是否有任何可能导致无法使用的内容。

网站编辑后

需要容纳两个元素(图像和 40% 宽度的 div)的列不够宽，无法容纳这两个元素(组合宽度为 957 像素，容器宽度为 845 像素)。图像没有足够的空间，因此它会被碰撞到第一个 div 下方...

将 productsummary 替换为:

#productsummary {
    clear: both;
    background: red;
    margin: 0 220px 0 10px;
    padding: 10px 0 0 0;
)

还有图像:

#lol {
    width: 200px;
    float: right;
    margin: 10px;
}