html - 如何设置 float div相对于邻居的宽度

Question

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

Content 在居中的 div 中包含固定宽度(由内容决定)的静态表格。在内容下方有一个 div，其中包含一行文本和该文本下方的图像。它应该漂浮在内容 的左侧。页面和图像具有最大宽度和最大高度。但是，当调整页面大小时，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%;
}

Answer 1

在我能够完全理解您正在寻找的内容之前，需要做一些事情。

您使用 HTML5 的方式很奇怪 <section>标记已弃用，并从 HTML5 开始删除，align属性。在这些元素上使用 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>

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