一、问题可能涉及到了浮动和行内元素两个知识点，首先需要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样式在开发工具里面的截图如下：
四、浏览器具体渲染的效果如下：
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：。
<div style="border: 1px solid blueposition:relativewidth: 200pxheight: 80px">
<div style="border: 1px solid bluetop: 19pxleft: 49pxposition:absolutewidth: 100pxheight: 40px"></div>
</div>
3、浏览器运行index.html页面，此时一个盒子放在了另一个盒子的正中央。
1、首先，如图所示，我在html中放置了两个iframe标签，没有额外的设置。如果浏览器直接打开，您可以看到iframe标签默认是水平排列的。
2、如果我将这两个iframe标签放在div标签中，我可以看到div标签默认垂直排列，也就是说，div标签会填充一行。
3、使用css将两个div标签的float设置为left。在此设置之后，两个标签水平排列。注意两个div后面的标签继续排列在这一行中，因为默认的div标签不会通过使用float来占用高度。
4、解决方案是在父div标签上放置两个div标签，然后将父标签的溢出设置为hidden。
5、使div标签水平显示的另一种方法是将其显示样式设置为内联块。
6、无论水平排列如何，当浏览器宽度太窄时，它会自动折叠，就好像它是垂直排列的一样。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）