如何让div中的内容横向排列
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
.main{width:700px; height:400px; float:left;}
.main .main_1{width:700px; height:400px; background-color:#99FF00; float:left;}
.main .main_2{width:700px; height:400px; background-color:#FFFF00; float:left;}
.main .main_3{width:700px; height:400px; background-color:#FF00FF; float:left;}
</style>
</head>
<body>
<div class="main">
<div class="main_1">
</div>
<div class="main_2">
</div>
<div class="main_3">
</div>
</div>
</body>
</html>
这种效果下内容是纵向排列的，想要横向排列该怎么办，求各位大神指教！ 展开
一、问题可能涉及到了浮动和行内元素两个知识点，首先需要div布局，写一个大的div作为父级盒子，里面有几个行内元素。如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV内容横向排列</title>
<style type="text/css">
.container {
width: 500px;
margin: 50px auto;
overflow: hidden;
border: 1px solid #ccc;
}
div span {
display: block;
width: 100px;
height: 100px;
background-color: hotpink;
float: left;
}
div>span+span {
margin-left: 100px;
}
</style>
</head>
<body>
<div class="container">
<span>我是第一个</span>
<span>我是第二个</span>
<span>我是第三个</span>
</div>
</body>
</html>
二、主要是需要对div里面的行内元素进行样式的设置：
<style type="text/css">
.container {
width: 500px;
margin: 50px auto;
overflow: hidden;
border: 1px solid #ccc;
}
div span {
display: block;
width: 100px;
height: 100px;
background-color: hotpink;
float: left;
}
div>span+span {
margin-left: 100px;
}
</style>
三、HTML和CSS样式在开发工具里面的截图如下：
四、浏览器具体渲染的效果如下：
我就是想要他们像这样挤在里面，但是我不知道为什么他会纵向排列，我想让他们超出部分横向排列，这样可以吗？
这个啊。。。看看这个效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
.main{width:700px; height:400px;overflow-x:scroll; float:left;}
.main .main_1{width:700px; height:400px; background-color:#99FF00; float:left;}
.main .main_2{width:700px; height:400px; background-color:#FFFF00; float:left;}
.main .main_3{width:700px; height:400px; background-color:#FF00FF; float:left;}
</style>
</head>
<body>
<div class="main">
<div style="width:2100px;">
<div class="main_1">
</div>
<div class="main_2">
</div>
<div class="main_3">
</div>
</div>
</div>
</body>
</html>
