文字不在我的图像顶部旁边答案

【问题标题】：text is not next to the top of my image文字不在我的图像顶部旁边
【发布时间】：2023-03-12 08:54:01
【问题描述】：

您好，我是 html 和 css 的新手，并尝试显示图像和一些文本。这个想法是将文本放在图像旁边，并且有效。但是，文本从图像底部而不是顶部开始。有人可以将其设置为从顶部开始吗？

这是我在 css 中使用的代码：

.images{
  float: left;
  margin: 5px;
}

这是我的 html 代码：

<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/main.css" />
<link rel="stylesheet" href="../css/contact.css" />
</head>
<header>
<div id="logo">
    <h1><a href="../html/index.html" id="logoLink">Baby kleding online</a></h1>
</div>
<div id="nav">
    <ul>
        <li><a href="../html/index.html"id="homenav">Home</a></li>
        <li><a href="../html/kleding.html"id="kledingnav">Kleding</a></li>
        <li><a class="inuse" href="../html/contact.html"id="contactnav">Contact</a>  </li>
        <li><a href="../html/vragen.html"id="vragennav">Vragen</a></li>
    </ul>
</div>
</header>
<body id = "contact">
<div id="page">
<div class="content">
    <h2>Contact</h2>
    <images>
        <img src="../images/logo.PNG">
        Het bedrijf 'Baby kleding online' wordt in 1953 opgericht door een dynamisch Belgisch ondernemersechtpaar. De eerste winkel wordt geopend op de Groenplaats in Antwerpen. Hier vind je de eerste kleding voor Pasgeboorene, baby's, peuters en kleuters.
        In het begin gebeurt de productie op de verdieping in een confectieatelier waar ook alle nieuwe modellen ontwikkeld worden.
        Wat later worden er nog winkels geopend. Het echtpaar omringt zich al heel snel met medewerkers.
        Het kleine confectieatelier groeit uit tot een groot plateau waarop verschillende modeontwerpsters werken.
        Langzaam aan komen er nieuwe winkels over heel België.
        Het merk gaat vervolgens over de grens: er worden filialen in Luxemburg en Athene geopend. Het bedrijf blijft internationaal uitbreiden.
        Vandaag heeft het Belgische merk al een hele weg afgelegd met bijna 300 winkels in de wereld. Baby kleding online wil het leven mooier en nog makkelijker maken voor de mama’s en hun jonge kinderen, met een assortiment gaande van knuffels, relaxen, flessenwarmers tot luiertafels, meubilair en zwangerschaps- en kinderkleding.
    </images>
    <br>
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.nl/maps?f=q&amp;source=s_q&amp;hl=nl&amp;geocode=&amp;q=KGD+Groenplaats,+Antwerpen,+Belgi%C3%AB&amp;aq=&amp;sll=51.219125,4.40313&amp;sspn=0.002967,0.008165&amp;ie=UTF8&amp;hq=KGD&amp;hnear=Groenplaats,+2000+Antwerpen,+Belgi%C3%AB&amp;ll=51.218201,4.400925&amp;spn=0.006295,0.006295&amp;t=h&amp;output=embed"></iframe><br /><small><a href="https://maps.google.nl/maps?f=q&amp;source=embed&amp;hl=nl&amp;geocode=&amp;q=KGD+Groenplaats,+Antwerpen,+Belgi%C3%AB&amp;aq=&amp;sll=51.219125,4.40313&amp;sspn=0.002967,0.008165&amp;ie=UTF8&amp;hq=KGD&amp;hnear=Groenplaats,+2000+Antwerpen,+Belgi%C3%AB&amp;ll=51.218201,4.400925&amp;spn=0.006295,0.006295&amp;t=h" style="color:#0000FF;text-align:left">Grotere kaart weergeven</a></small>
    <br>

</div>


</div>
</body>
</html>

提前致谢！

【问题讨论】：

问题一，你的body标签放错地方了。
你想做这样的事情吗？ jsfiddle.net/3DQDp/embedded/result

标签： html css image text

【解决方案1】：

你的代码有很多错误，首先你的<body>标签应该在</head>之后，去掉<images>标签（它不是HTML标签）。

我更新了您的代码，它应该可以按照您希望的方式工作。（虽然我真的不知道您希望图像出现在哪里）。

Check this out

【讨论】：

也许他们的本意是<div class="images">？
@kush 是的，也许，但这会使整个 div 浮动，而不仅仅是图像。

【解决方案2】：

你应该写在你的CSS中：

images img{float:left;margin:5px}

这应该会为您解决问题。

.images{float:left} 指的是 images 元素，而不是其中的项目 + 你有一个错误，你应该写 images{float:left} （没有 . ）您编写的代码实际上是在创建一个名为 images 的空洞新类，而您并没有在任何地方使用它。

【讨论】：

【解决方案3】：

<div>
    <p style="float: left;"><img src="../images/logo.PNG"></p>
    <p>Het bedrijf 'Baby kleding online' wordt in 1953 opgericht door een dynamisch Belgisch ondernemersechtpaar. De eerste winkel wordt geopend op de Groenplaats in Antwerpen. Hier vind je de eerste kleding voor Pasgeboorene, baby's, peuters en kleuters.
    In het begin gebeurt de productie op de verdieping in een confectieatelier waar ook alle nieuwe modellen ontwikkeld worden.
    Wat later worden er nog winkels geopend. Het echtpaar omringt zich al heel snel met medewerkers.
    Het kleine confectieatelier groeit uit tot een groot plateau waarop verschillende modeontwerpsters werken.
    Langzaam aan komen er nieuwe winkels over heel België.
    Het merk gaat vervolgens over de grens: er worden filialen in Luxemburg en Athene geopend. Het bedrijf blijft internationaal uitbreiden.
    Vandaag heeft het Belgische merk al een hele weg afgelegd met bijna 300 winkels in de wereld. Baby kleding online wil het leven mooier en nog makkelijker maken voor de mama's en hun jonge kinderen, met een assortiment gaande van knuffels, relaxen, flessenwarmers tot luiertafels, meubilair en zwangerschaps- en kinderkleding.</p>
</div>

像这样！

【讨论】：

图片不需要P标签，最好给图片或div添加类。