image and text display not working_问答_开发者

开发者 https://www.devze.com 2023-02-09 00:51 出处：网络

I have an html file like this.I am getting the output like this in picture1.But i need an output like this in picture2.mainly text should be parallel to the image

相关专题：

I have an html file like this.I am getting the output like this in picture1.But i need an output like this in picture2.mainly text should be parallel to the image

<html 开发者_如何学Pythonxmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en-US\" xml:lang=\"en-US\">
<head>
<title>MigraineMate Paint Graph</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
<link href=\"default.css\" rel=\"stylesheet\" type=\"text/css\"/>
</head>
<body>
<img  src=\"Justin.png\" alt=\"justin Biber\"/>
<div id=\"notification\">
<h1>Please Wait  Graph may take a moment to load</h1>

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

and css file is

#notification 
{
    width: 860px;
    height: 730px;
    margin: auto;
    background-color: transparent;
}

#notification h1 
{
    padding-top: 15px;
    padding-left:0px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:20px;
}

You may start with left-floating the beaver:

<img src="..." alt="..." style="float:left; text-align:left;" />

Here are some quick notes.

You need to add {float: left;} to the image to allow the text to wrap around it. Remeber to also clear the float afterwards using something like <div style="clear: both;"></div>