2

我有一个看起来像这样的页面：

内容在居中的 div 内包含一个固定宽度（由内容确定）的静态表格。在内容下方有一个 div，其中包含一行文本和该文本下方的图像。它应该漂浮在Content的左侧。页面和图像具有最大宽度和最大高度。但是当页面调整大小时，Image的收缩速度比页面慢两倍。这会导致页面如下所示：

我希望Image总是能填补左边的大部分空白。调整页面大小时，图像也应相应调整大小。

http://jsfiddle.net/FZ4KG/

html:

<section align="center">
    <h4 align="center">Heading</h4>
    <div align="center">
        <table>Content</table>
        <div id="image_box">
            <p align="left">Text above image</p>
            <img src="img.png" id="image">
        </div>
    </div>
</section>

CSS：

#image_box {
    padding-left: 15px;
    height: 0px;
    top: -75px;
    position: relative;
}

#image {
    float: left;
    max-width: 20%;
}
4

1 回答 1

0

在我能够完全理解您正在寻找的内容之前，请先做几件事。

奇怪的是，您如何使用<section>带有已弃用且从 HTML5 中删除的align属性的 HTML5 标记。在这些元素上使用 css 时使用内联样式仍然很奇怪。

我假设您正在寻找将这些元素放在其父容器中的中心。为此，您需要使用设置宽度并将元素的水平边距设置为自动。

div {

  margin: 0 auto;

}

您的标记中也有错字。DIV id 说imabe_box。假设它应该是image_box.

<div align="center">
    <table>Content</table>
    <div id="imabe_box"> // ID should be set to 'image_box'
        <p align="left">Text above image</p>
        <img src="img.png" id="image">
    </div>
</div>

请添加更多代码或回复答案，我们可以为您提供进一步帮助。

于 2013-09-27T16:55:44.067 回答