Question

我想要做的是继续将图像保留在左侧，就像我的第一段一样。但它一直在缩进。这是一个缩小的例子来展示我的拥有：

<html>
    <h3>Acknowledge the Clicker</h3>
    <p id="clicker">
    <img align="left" src="https://farm2.staticflickr.com/1139/821163889_6a1125ac98_s.jpg" HEIGHT="175" WIDTH="160"/>
    Step 1:Click and give your dog a treat or praise them<br>
    Step 2:Repeat Step 1 at least 24 more times(This is what we call"<a href="http://dictionary.reference.com/browse/Classical%20Conditioning?s=t" target="_blank"><font color="#69FFFF"><em>Classical Conditioning</em></font></a>")<br>
    IMPORTANT: <em>ALWAYS</em> give a treat or praise your dog after clicking<br>
    </p>
    <h3>Sit</h3>
    <p id="sit">
    <img align="left" src="https://farm1.staticflickr.com/23/123112077_eb473a16ac_s.jpg" HEIGHT="161" WIDTH="146"/>
    Step 1:Wait until your dog sits then click and reward/praise<br>
    Step 2:Repeat Step 1 10 times more<br>
    Step 3:So you have 2 options:<br>A.Use a hand signal to get your dog to sit<br>B.Say sit<br> which ever you decide to use do it then click and reward/praise<br>
    Step 4:Repeat Step 3 20 more times<br>
</html>

Answer 1

从图片代码中删除align =“left”将解决您的问题。我还“稍微”修改了一些其他代码以使其更好：

<style>
    // your other styles here. I removed your sit and clicker ones
    .instructions {
    color: #9E9E9E;
    font-family: monospace;
    font-size: 15px;
    text-align: left;
    }

    .instructions .steps {
        display: inline-block;
        vertical-align: top;
    }

    .definition {
        color: #E00025; 
    }
    .definition span {
        color: #69FFFF;
        font-style: italic;
    }
</style>

您的HTML代码：

<div class="instructions">
        <h3>Acknowledge the Clicker</h3>
        <img src="http://paws101.com/wp-content/uploads/2013/09/ClickerTraining-PaswsitiveStepsDogTraining-300x260.png" HEIGHT="175" WIDTH="160" valign="top"/>
        <div class="steps">
        Step 1:Click and give your dog a treat or praise them<br>
        Step 2:Repeat Step 1 at least 24 more times(This is what we call" <a class="definition" href="http://dictionary.reference.com/browse/Classical%20Conditioning?s=t" target="_blank"><span>Classical Conditioning</span></a>")<br>
        IMPORTANT: <em>ALWAYS</em> give a treat or praise your dog after clicking
        </div>
    </div>
    <div class="instructions">  
        <h3>Sit</h3>
        <img src="http://www.kimballstock.com/pix/DOG/03/DOG_03_RK0219_02_P.JPG" HEIGHT="161" WIDTH="146" />
        <div class="steps">
        Step 1:Wait until your dog sits then click and reward/praise<br>
        Step 2:Repeat Step 1 10 times more
        Step 3:So you have 2 options:<br>
        A.Use a hand signal to get your dog to sit<br>
        B.Say sit<br>
        which ever you decide to use do it then click and reward/praise<br>
        Step 4:Repeat Step 3 20 more times<br>
        </div>
    </div>

最后一个修复是移除您的第一个关闭头标记。样式部分应包含在头部。我已经在你的代码中留下了这些标签，但我建议删除它们，因为在大多数情况下这是不好的编码习惯。

Answer 2

您看到缩进的原因是第一张图片被告知浮动到左侧。之后的文本将尝试在其周围浮动（包括后面的段落）。

您可以使用clear:both; css样式阻止它在某些时候执行此操作。例如，要让您的Sit标题级别3文本显示在第一张图片下方，请执行以下操作：

<h3 style="clear:both;">Sit</h3>

或者，如果您只想要段落而不是标题，那么您可以将该样式添加到#sit样式。

作为参考，this guide很有用。

对齐左边时如何避免缩进图像？

2 个答案: