我有一个看起来像这样的页面:
Content 在居中的 div 中包含固定宽度(由内容决定)的静态表格。在内容下方有一个 div,其中包含一行文本和该文本下方的图像。它应该漂浮在内容 的左侧。页面和图像具有最大宽度和最大高度。但是,当调整页面大小时,Image 的收缩速度比页面慢两倍。这导致页面看起来像这样:
我希望 Image 始终填充左侧的大部分空白。调整页面大小时,图片 也应相应地调整大小。
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%;
}
最佳答案
在我能够完全理解您正在寻找的内容之前,需要做一些事情。
您使用 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>
请添加更多代码或回复答案,我们可以进一步帮助您。
关于html - 如何设置 float div相对于邻居的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19050251/