html - 将图片直接对齐到 标签旁边

Question

前几天开始学习HTML和CSS，现在遇到了一个问题:

#referenzen{
        width: 100%;
        padding: 25px;
    
    }

    #referenzen h1, h2, h3, h4, h5, h6{
        margin-bottom: 0;
    }

    #referenzen p{
        padding-right: 25px;
        font-size: 18px;
    }

    #referenzen img{
        height: 50px;
        width: 50px;
        float: left;
    }

<div id="wrapper">
    <div id="referenzen">
        <img src="../Bilder/info.png">
        <h1>Unsere Firmengeschichte</h1>
        <br>
        <p>Die Firma Fair-Bau GmbH wurde im April 2010 gegründet und betätigt sich in den Sparten ausführende Baumeisterarbeiten, Vollwärmeschutzarbeiten, Verputzarbeiten sowie dem Handel mit Baustoffen.
            Der Betrieb beschäftigt 15- 20 Mitarbeiter.	</p>
    </div>

我怎样才能直接将图像分配给标签，使其紧挨着它？

当前状态的页面:http://imgur.com/a/IprOF

提前致谢!

Answer 1

我有两种方法:

• 在 HTML 中:您可以插入 <img> -在你体内标记<h1></h1> -标签
• 在 CSS 中:您可以设置 h1和 img至 display: inline-block

我更喜欢第一个。

编辑以便更好地理解:

标签<h1>...<h6>有一个默认值display的 block这意味着它们总共占用了父容器的 100% 宽度。因此，将其更改为 inline-block 会破坏 100% 宽度并将其缩小到设置的宽度值，或者如果未设置为所包含元素的大小。