vue中的横向排列_如何让div中的内容横向排列

展开全部

一、问题可能涉及到了浮动和行内元素两个知识点，首先需要div布局，写一个大的div作为父级盒子，里e5a48de588b662616964757a686964616f31333363383965面有几个行内元素。如下：

DIV内容横向排列

.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;

}

我是第一个

我是第二个

我是第三个

二、主要是需要对div里面的行内元素进行样式的设置：

.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;

}

三、HTML和CSS样式在开发工具里面的截图如下：

四、浏览器具体渲染的效果如下：