如何让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>本回答被提问者采纳
怎样让一个div里的多个div横向排列
1、新建html文档，在body标签中添加一个div标签，然后在这个div标签中添加一些div标签：2、为外div标签和内div标签添加一些样式，由于div元素是块级元素，所以内div会在外div中垂直排列：3、为内div添加“display:inline-block;”样式，这时内div就会变成行级块元素，这样内div就会在div中横向排列了 ...
怎么设置网页文字横向排列?
1、用Dreamweaver新建一个HTML文件。2、修改title为html+css实现横向导航。3、新建一个div id为“a”，添加ul li标签。4、在li中添加自己想要的文字 并调整好文字间距,按F12预览。5、首先去掉字体前面的小黑点。6、接下来，使文字横向排列，设置代码如下，给li设置左浮动效果。7、按F12预览，效果如...
css如何让div横向排列
可以使用弹性布局，display: flex 就可以让div横排，默认布局轴方向就是横向，justify-content: space-between可以是div平均分布在水平轴上。
如何让div中的内容横向排列
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:...
怎么让div横向排列?
<\/div> 这6个div都会横向排列。如果想要更多的div横向排列下去，只需要修改最上面那个div宽度尺寸就可以了。=== 第一次补充：其实用不着JS呀，用css就可以 每个li为89px的话，外面的最小宽度应该为712px，里面的li还不能包含边框，如果每个li左右各带1px的边框，那还需要再加16px的宽度，等于728px...
怎么设置css,把放在一个div中的图片横着排列
1、首先，如图所示，我在html中放置了两个iframe标签，没有额外的设置。如果浏览器直接打开，您可以看到iframe标签默认是水平排列的。2、如果我将这两个iframe标签放在div标签中，我可以看到div标签默认垂直排列，也就是说，div标签会填充一行。3、使用css将两个div标签的float设置为left。在此设置之后，...
两个DIV如何横向排列?
如何定义让两个DIV横向排列 两个DIV横向排列方法一：一般情况，默认的DIV是写一个换一行，那么如何定义两个DIV横向排列而不换行呢?DIV默认的display属性是block。所以每一个DIV都是新的一行，现在把display换成inline就不会换新行了。两个DIV横向排列方法二：这里使用float:right属性。float做为CSS中的一...
用jquery拼接出来的许多div为什么是垂直排列的,怎么变成横向排列
可以改变div的style，添加浮动让它们横着排列,float:left;（左浮动），float：right；（右浮动）。浮动会影响下面的元素，如果不想要浮动可以用clean去掉。
如何使div中的ul标签横向排列??
第一种方法是：用给ul添加display:inline;就可以实现li在一行内显示；第二种：把li定一个宽度 然后用float:left;或者是float:right;都行。参考资料：<a href="http:\/\/www.qutzs.com" target="_blank" rel="nofollow noopener">www.qutzs.com<\/a> ...
怎么将自定义不确定多个div在页面显示时均匀的横向排列
当DIv超出屏幕如何显示？是隐藏\/轮播，还是缩小div的wdith？横向列的的问题好解决，把这些div 的float设为left或是right就可以实现。css:.div-box div{float:left;height:50px;} html:<div class="div-box"> <div><\/div><div><\/div><div><\/div><div><\/div><div><\/div><div><\/div> ...
