I'm trying to create a chart on a webpage with each entry being coded as a div containing a <p> element, to number the entry, furthest to the left and a picture next to it. However when I try this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTDxhtml1-strict.dtd">
<html xmlns="hhtp://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style>
.entry {
background-color: #99d699;
width: 600px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 1px;
border-color: #808080;
border-width: 2px;
border-bottom-style: solid;
position: relative;
overflow: hidden;
}
.entry p {
color: white;
font-weight: bold;
font-size: 30px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;
}
.art {
width: 80px;
height: 80px;
margin-top: auto;
margin-bottom: auto;
margin-left: 10px;
float: left;
overflow: hidden;
}
</style>
</head>
<body style="background-color: #D6DDD6;">
<div class="entry">
<p>
1
</p>
<img class="art" src="http://wvs.topleftpixel.com/photos/2008/04/Dundas_Square_Pano_Fisheye_tunnel_crop.jpg" alt="Random pic" />
</div>
</body>
</html>
...the picture ends up underneath the paragraph. How can I cleanly position the image to the right of the paragraph?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
