<html>
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>
<style>
.demo01{width:600px;}
.demo01.left{width:100px; float:left}
.demo01.right{width:500px; float:right}
</style>
</head>
<body>
<div class="demo01">
<div class="left">
<img src="img/head01.jpg"/>
</div>
<div class="right">
<h6>樱桃</h6>
<p>为什么两个子div不显示在一行呢？
</p>
<span>10min</span>
</div>
</body>
2015-06-12
楼上代码有误，更正
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p{
margin: 0;
padding: 0;}
.demo01{width:600px;}
/* 重点来了！！这里的.demo01后面要加空格再加.left或right
.demo01.left 这种写法应该是错误的！！！所以后面属性不生效，
正确的子类写法应该是加空格或者用子选择器 .demo01>.left或者直接写.left
具体css选择器 可参考 慕课网（http://www.imooc.com/code/2023）和w3school（http://www.w3school.com.cn/css/css_selector_descendant.asp）的例子 */
.demo01 .left{width:100px;float: left;background-color: #f63;}
.demo01 .right{width:500px;float: right;background-color: #ccc;}
</style>
</head>
<body>
<div class="demo01">
<div class="left">
<img src="1.jpg">
</div>
<div class="right">
<h6>小丸子</h6>
<p>HTML标记、div+css+javascript</p>
<span>time时间</span>
</div>
</div>
</body>
</html>
日了，居然是一个空格的问题！！！！囧
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p{
margin: 0;
padding: 0;}
.demo01{width:600px;}
/* 重点来了！！这里的.demo01后面要加空格再加.left或right
.demo01.left 这种写法应该是错误的！！！所以后面属性不生效，
正确的子类写法应该是 .demo01>.left或者直接写.left
具体css选择器 可参考 慕课网（http://www.imooc.com/code/2023）和w3school（http://www.w3school.com.cn/css/css_selector_descendant.asp）的例子 */
.demo01>.left{width:100px;float: left;background-color: #f63;}
.demo01>.right{width:500px;float: right;background-color: #ccc;}
</style>
</head>
<body>
<div>
<div>
<img src="1.jpg">
</div>
<div>
<h6>小丸子</h6>
<p>HTML标记、div+css+javascript</p>
<span>time时间</span>
</div>
</div>
</body>
</html>举报
