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

  • Post author:
  • Post category:vue


展开全部

一、问题可能涉及到了浮动和行内元素两个知识点,首先需要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样式在开发工具里面的截图如下:

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



版权声明:本文为weixin_39621456原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。