正在回答
p标签是段落标签，因此是独立成行的，img属于行内元素，行内元素的特性是在同一行显示，但是这个也跟你的代码嵌套有关系，建议你将代码贴上来（包括css和html）以便于大家更好的发现问题并帮你解答，祝学习愉快~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IMOOC</title>
<style>
*{
margin:0;
padding:0;
}
section{
width:100%;
height:100%;
overflow:hidden;
}
samp{
font-size:20px;
color:#ccc;
}
section>aside{
float:left;
padding:20px;
}
section>aside dl{
padding:10px;
position:relative;
}
section>aside dl dt{
display:block;
width:40px;
height:40px;
color:#fff;
line-height:40px;
text-align:center;
position:absolute;
}
section>aside dl dd{
margin-left:60px;
}
.one{
background:url('http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png') no-repeat;
background-size:100% 100%;
}
.two{
background:url('http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png') no-repeat;
background-size:100% 100%;
}
.three{
background:url('http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png') no-repeat;
background-size:100% 100%;
}
.four{
background:url('http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png') no-repeat;
background-size:100% 100%;
}
article{
width:400px;
padding:20px;
float:left;
}
article img{
width:500px;
height:150px;
}
article p{
clear:both;
display:inline-block;
width:500px;
padding:10px;
}
</style>
</head>
<body>
<section>
<aside>
<h1>Recent <samp> Course</samp></h1>
<dl>
<dt class='one'>1</dt>
<dd>
<h2>Hyper Text Markup Language</h2>
<p>HTML. is the dajfdklafd afjdakfdkl</p>
</dd>
</dl>
<dl>
<dt class="two">2</dt>
<dd>
<h2>Hyper Text Markup Language</h2>
<p>HTML. is the dajfdklafd afjdakfdkl</p>
</dd>
</dl>
<dl>
<dt class="three">3</dt>
<dd>
<h2>Hyper Text Markup Language</h2>
<p>HTML. is the dajfdklafd afjdakfdkl</p>
</dd>
</dl>
<dl>
<dt class="four">4</dt>
<dd>
<h2>Hyper Text Markup Language</h2>
<p>HTML. is the dajfdklafd afjdakfdkl</p>
</dd>
</dl>
</aside>
<article>
<h1>Welcome to <samp>Massive Open Online Course!</samp></h1>
<p>we prive this ahda dfa kwwkuij jfewi jqluwoiqj lrwqj </p>
<img src="http://img1.sycdn.imooc.com/climg//582e61180001ede703300130.jpg">
<p>这里的P标签我设置了宽度 display：inline-block 若是中文，超出宽度能够自动换行哦，如果是纯英文 ，就像下面的，就不能，会超出来哦</p>
<P>Space <span style="color: #f66">fdsgfdgkldajglkdssssssssae jggfdgfdgfdgdfgdkdjhgiewhgeiwiughewuighewuigheuiwhgafdafdfdafdafdasfdasfdasfdsafdsafafda</span></P>
<p>无空格的红色纯英文部分被当做另类在标点处自动换行了（这里的标点是空格在space后面），而且是在标点之后换行，并没有设置换行标签，经过尝试发现，P标签内文字若出现无空格，无标点的纯英文，则出现文字溢出现象</p>
</article>
</section>
</body>
</html>
/* 在此完成CSS样式设置*/
*{
margin:0;
padding:0;
}
section{
width:100%;
height:100%;
overflow:hidden;
}
samp{
font-size:20px;
color:#ccc;
}
section>aside{
float:left;
padding:20px;
}
section>aside dl{
padding:10px;
position:relative;
}
section>aside dl dt{
display:block;
width:40px;
height:40px;
color:#fff;
line-height:40px;
text-align:center;
position:absolute;
}
section>aside dl dd{
margin-left:60px;
}
.one{
background:url('http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png') no-repeat;
background-size:100% 100%;
}
.two{
background:url('http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png') no-repeat;
background-size:100% 100%;
}
.three{
background:url('http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png') no-repeat;
background-size:100% 100%;
}
.four{
background:url('http://img1.sycdn.imooc.com/climg//582e61290001787900500051.png') no-repeat;
background-size:100% 100%;
}
article{
width:400px;
padding:20px;
float:left;
}
article img{
width:500px;
height:150px;
}
article p{
clear:both;
display:inline-block;
width:500px;
padding:10px;
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IMOOC</title> <link type="text/css" href="main.css"> </head> <body> <section> <aside> <h1>Recent <samp> Course</samp></h1> <dl> <dt class='one'>1</dt> <dd> <h2>Hyper Text Markup Language</h2> <p>HTML. is the dajfdklafd afjdakfdkl</p> </dd> </dl> <dl> <dt class="two">2</dt> <dd> <h2>Hyper Text Markup Language</h2> <p>HTML. is the dajfdklafd afjdakfdkl</p> </dd> </dl> <dl> <dt class="three">3</dt> <dd> <h2>Hyper Text Markup Language</h2> <p>HTML. is the dajfdklafd afjdakfdkl</p> </dd> </dl> <dl> <dt class="four">4</dt> <dd> <h2>Hyper Text Markup Language</h2> <p>HTML. is the dajfdklafd afjdakfdkl</p> </dd> </dl> </aside> <article> <h1>Welcome to <samp>Massive Open Online Course!</samp></h1> <p>we prive this ahda dfa kwwkuij jfewi jqluwoiqj lrwqj </p> <img src="http://img1.sycdn.imooc.com/climg//582e61180001ede703300130.jpg"> <p>qwriwoqjroiwqjdfwqoijfoiwqjfoiqwjfoiwqjfoiwqjfoiwqjfdafadfaffdafadf</p> <P>fdjalkfdjakfldjsafiewfioewfjfjewfmvmc,fdafafdafdafdsafdafadfdafdafcxvn,</P> </article> </section> </body> </html>
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星