定义了3个div，怎么让这3个div显示在同一行呢？为啥下面小弟我的css代码实现不了呢
定义了3个div，如何让这3个div显示在同一行呢？为啥下面我的css代码实现不了呢？
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>html5</title>
<style type="text/css">
div{
width: 200px;
height:100px;
}
#oneDiv{
border:1px solid black;
float: left;
}
#twoDiv{
border:1px solid red;
float: left;
}
#threeDiv{
border:1px solid blue;
float: left;
}
</style>
</head>
<body>
<div id="outDiv">
<div id="oneDiv">
<ul>
<li>
这里是第一个div里面的内容
</li>
</ul>
</div>
<div id="twoDiv">
<ul>
<li id="myLi"></li>
</ul>
</div>
<div id="threeDiv">
<ul>
<li>这里是第三个div里面的内容</li>
</ul>
</div>
</div>
</body>
</html>
------解决思路----------------------
. <!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>html5</title>
<style type="text/css">
div{
width: 200px;
height:100px;
}
#outDiv{
width: 610px;
}
#oneDiv{
border:1px solid black;
float: left;
}
#twoDiv{
border:1px solid red;
float: left;
}
#threeDiv{
border:1px solid blue;
float: left;
}
</style>
</head>
<body>
<div id="outDiv">
<div id="oneDiv">
<ul>
<li>
这里是第一个div里面的内容
</li>
</ul>
</div>
<div id="twoDiv">
<ul>
<li id="myLi"></li>
</ul>
</div>
<div id="threeDiv">
<ul>
<li>这里是第三个div里面的内容</li>
</ul>
</div>
</div>
</body>
</html>
------解决思路----------------------
div{width: 200px; height:100px;}把所有的div都设置了， 包括outDiv
float: left;只是设置如何浮动，又不是强制限制显示在同一行，当父容器宽度不够时会显示在下一行
只有单个元素的宽度超过父容器，父容器才会被撑开
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>html5</title>
<style type="text/css">
div{
width: 200px;
height:100px;
}
#oneDiv{
border:1px solid black;
float: left;
}
#twoDiv{
border:1px solid red;
float: left;
}
#threeDiv{
border:1px solid blue;
float: left;
}
</style>
</head>
<body>
<div id="outDiv">
<div id="oneDiv">
<ul>
<li>
这里是第一个div里面的内容
</li>
</ul>
</div>
<div id="twoDiv">
<ul>
<li id="myLi"></li>
</ul>
</div>
<div id="threeDiv">
<ul>
<li>这里是第三个div里面的内容</li>
</ul>
</div>
</div>
</body>
</html>
------解决思路----------------------
. <!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>html5</title>
<style type="text/css">
div{
width: 200px;
height:100px;
}
#outDiv{
width: 610px;
}
#oneDiv{
border:1px solid black;
float: left;
}
#twoDiv{
border:1px solid red;
float: left;
}
#threeDiv{
border:1px solid blue;
float: left;
}
</style>
</head>
<body>
<div id="outDiv">
<div id="oneDiv">
<ul>
<li>
这里是第一个div里面的内容
</li>
</ul>
</div>
<div id="twoDiv">
<ul>
<li id="myLi"></li>
</ul>
</div>
<div id="threeDiv">
<ul>
<li>这里是第三个div里面的内容</li>
</ul>
</div>
</div>
</body>
</html>
------解决思路----------------------
div{width: 200px; height:100px;}把所有的div都设置了， 包括outDiv
float: left;只是设置如何浮动，又不是强制限制显示在同一行，当父容器宽度不够时会显示在下一行
只有单个元素的宽度超过父容器，父容器才会被撑开