[分享]css两个view左右排列

在前端开发中，经常会遇到需要将两个视图左右排列的情况，这时候可以使用CSS来实现。

  .container{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .view{
      width: 50%;
    } 

上述代码中，我们首先在容器元素中设置了flex布局，并且设置了左右对齐和居中对齐。接着我们设置了两个视图的宽度为50%，这样它们就能够平分容器的宽度。

如果想要在一行中放置多个视图，则可以将视图的宽度设置为不同的百分比，以此来控制每个视图所占用的宽度。

  .view{
      width: 25%;
    } 

上述代码将视图的宽度设置为25%，这样在一行中就能够容纳4个视图。

除了使用flex布局以外，在某些情况下还可以使用float来实现视图的左右排列。例如：

  .view{
      width: 50%;
      float: left;
    } 

上述代码将视图的宽度设置为50%，并且将其向左浮动。在另一个视图中，只需要将其向右浮动即可。

总的来说，在实现CSS左右排列时，我们可以使用flex布局或者float布局，它们都有各自的优劣点，具体的选择可以根据实际的需求和场景来确定。