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

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

web

Web 左对齐时如何避免图像缩进？,web,Web,我想做的是继续保持图片在左边，就像我的第一段一样。但它一直在缩进。下面是一个简化的示例，以显示我所拥有的： <html> <h3>Acknowledge the Clicker</h3> <p id="clicker"> <img align="left" src="https://farm2.staticflickr.com/1139/821163889_6a1125ac98_s.jpg" HEIGHT="175"

我想做的是继续保持图片在左边，就像我的第一段一样。但它一直在缩进。下面是一个简化的示例，以显示我所拥有的：

<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>

确认点击器步骤1：点击并给你的狗一顿款待或表扬他们步骤2：至少再重复步骤1 24次（我们称之为“”）重要提示：点击后，一定要款待或表扬您的爱犬坐着

步骤1：等待您的狗坐下，然后单击并奖励/表扬步骤2：重复步骤1 10次以上第三步：所以你有两个选择： A.用手势让你的狗坐下 B.说你决定用哪个坐，然后点击并奖励/表扬步骤4：重复步骤3 20次以上

从图像标签中删除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>


//你的其他款式在这里。我拿走了你的坐椅和遥控器
.说明{
颜色：#9E9E9E；
字体系列：monospace；
字体大小：15px；
文本对齐：左对齐；
}
.说明.步骤{
显示：内联块；
垂直对齐：顶部；
}
.定义{
颜色：#E00025；
}
.定义范围{
颜色：#69FFFF；
字体：斜体；
}

您的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>


确认点击器
步骤1：点击并给你的狗一顿款待或表扬他们

步骤2：至少再重复步骤1 24次（我们称之为“”）

重要提示：点击后，一定要给你的狗一次款待或表扬
坐着
步骤1：等待您的狗坐下，然后单击并奖励/表扬

步骤2：重复步骤1 10次以上
第三步：所以你有两个选择：

A.用手势让你的狗坐下

B.说坐

无论您决定使用哪种方法，请单击并奖励/表扬

步骤4：重复步骤3 20次以上

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

看到缩进的原因是第一个图像被告知向左浮动。后面的文本将尝试围绕它浮动（包括后面的段落）

您可以通过使用

clear:bothcss
样式。例如，要使您的Sit
标题级别3文本显示在第一张图片下方，请执行以下操作：
<h3 style="clear:both;">Sit</h3>

Sit

或者，如果您只想让段落而不是标题有这样的行为，您可以将该样式添加到#sit
样式中
作为参考，它很有用。
您应该包括一个小例子，说明您尝试了什么以及为什么它不够好。提供一个链接到一个外部页面，该页面将在以后更改或消失，这将使这个问题对其他人毫无用处。