图像对齐占段落的 100%答案

【问题标题】：Image alignment takes 100% of the paragraph图像对齐占段落的 100%
【发布时间】：2012-01-04 03:01:17
【问题描述】：

我正在使用 tinyscrollbar 插件，并且我有一个段落应该是和图像（与文本对齐）。当我把它放在那里时，它需要 100% 的宽度和 100% 的可见（我说我正在使用滚动条）高度。如何解决？

<div id="descriptionContainer" style="width: 100%; height: 60%; bottom: 20px; border: none; ">
    <div id="scrollbar1">
        <div class="scrollbar">
            <div class="track">
                <div class="thumb">
                    <div class="end"></div>
                </div>
            </div>
        </div>
        <div class="viewport">
            <div class="overview">
                <p> <img src="myImage.png" align="left" width="350" height="400" /> Lorem ipsum dolor sit amet consectetur.... </p> 
            </div> 
        </div> 
    </div> 
    <img src="img/spacer.png" width="100%" height="100%" />
</div>

p 标签 css:

p { text-align: justify; line-height: 1.5em; }

.img 类：

.img { width: 25%; height: auto; background: none; }

提前致谢！

【问题讨论】：

你能告诉我们你的代码的相关部分吗？您是否为图像设置了宽度和高度？
<div id="descriptionContainer" style="width: 100%; height: 60%; bottom: 20px; border: none; "> <div id="scrollbar1"> <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div> <div class="viewport"> <div class="overview"> <p> <img src="myImage.png" align="left" width="350" height="400" /> Lorem ipsum dolor sit amet consectetur.... </p> </div> </div> </div> <img src="img/spacer.png" width="100%" height="100%" /> </div>
你想把它固定到什么地方？您已将唯一的图像明确设置为宽度 100%，同样高度。你能解释一下你真正想要/期望它做什么吗？刚刚注意到你的评论。您应该能够编辑问题以将其放在那里，而不是将其放在更难看到且更难阅读的 cmets 中。 :)
这是主 div，宽度：100%；查看.overview中的IMG标签
不是原始问题的范围，但我想知道使用“spacer.png”开始；具有该名称的图像通常用于可以通过纯 CSS 解决的 hack。再一次，虽然......比什么都好奇，因为这不是你真正的问题。

标签： html css paragraph

【解决方案1】：

你的图片上有宽度和高度属性：

 <img src="img/spacer.png" width="100%" height="100%" />

删除它们，它将显示为自然大小。

【讨论】：

不，不，不.. 带有 img src="myImage" 的 IMG 标签分隔符只是 IE 修复。

【解决方案2】：

<img src="img/spacer.png" width="100%" height="100%" />

这是导致您出现问题的行，如果可能，它将占用所有空间。试试这个：

<img src="img/spacer.png" />

或者这个

<img src="img/spacer.png" width="[size]px" height="[size]px" />

【讨论】：