在< p>右侧浮动图片在< div> [英] Floating picture to right of <p> within a <div>
本文介绍了在< p>右侧浮动图片在< div>的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在网页上创建一个图表，每个条目都被编码为包含< p> 元素的div，以便为条目编号，最远左边和旁边的一张图片。但是当我尝试下面的代码时：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // EN< head>
http://www.w3.org/TR/xhtml1/DTD\xhtml1-strict.dtd\">
< 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;
职位：亲属;
overflow：hidden;
}
.entry p {
颜色：白色;
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 =artsrc =http://wvs.topleftpixel.com/photos/2008/04/Dundas_Square_Pano_Fisheye_tunnel_crop.jpgalt =随机图片/>
< / div>
< / body>
< / html>
...图片在段落下方结束。如何将图片清晰地放置在段落右侧？
只需在CSS中添加以下代码
p {
float：left;
}
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/DTD\xhtml1-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?
解决方案
Here is JSBin
Simply add below code in your CSS
p{
float:left;
}
这篇关于在< p>右侧浮动图片在< div>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
