html - 文字不在我图片的顶部旁边

标签 html css image text

您好,我是 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>标签应该在 </head> 之后, 去掉 <images>标记(它不是 HTML 标记)。

我更新了您的代码,它应该可以按您希望的方式工作。 (虽然我真的不知道你想让图像出现在哪里)。

Check this out

关于html - 文字不在我图片的顶部旁边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19734656/

相关文章:

css - 位置 : fixed; does not base element in viewport

php - Jcrop 对大尺寸图像有问题

javascript while() 循环创建一行单元格而不是表格

html - 背景图像中的线条

html - 用于html5开发的IDE

css - 如何定位 iframe?

ios - Swift 4 : Pinch gesture, 图像尺寸反弹

java - ImageIO 忽略 PNG alpha channel

html - CSS 3D效果横幅

jquery - CSS/Jquery 时间轴/调度程序显示