[分享]css两个块左右对齐

CSS 对齐两个块使它们显示在同一行并保持左右对齐。一般来说，这个问题的解决方案有几种，但是最常见且最简单的方式是使用 float 属性。 .leftblock { float: left; widt...

CSS 对齐两个块使它们显示在同一行并保持左右对齐。一般来说，这个问题的解决方案有几种，但是最常见且最简单的方式是使用 float 属性。

 .left-block {
        float: left;
        width: 50%;
    }

    .right-block {
        float: right;
        width: 50%;
    } 

上述代码中，左侧块使用 float: left; 属性向左浮动，宽度设为 50%；右侧块使用 float: right; 属性向右浮动，宽度同样设为 50%。在这种情况下，两个块具有相同的宽度，总宽度为 100%。由于两个块都浮动了，它们会放在同一行。而由于它们总宽度为 100%，因此会自动左右对齐。

然而，我们需要注意一点，就是要为容器添加一个类或 ID，并通过声明 overflow: hidden; 或其他清除浮动的方法来确保容器与块布局的一致性。否则，容器可能会展示不出来，甚至会影响网站布局。

除了使用 float 属性之外，display: flex; 属性也可以用于解决对齐两个块的问题。使用 flexbox，只需要为容器设置 display: flex; 属性，然后使用 justify-content: space-between; 属性来实现两个块的左右对齐。

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

    .left-block {
        width: 50%;
    }

    .right-block {
        width: 50%;
    } 

在这种情况下，容器本身就是一个 flexbox 容器，左右两个块只需要设置宽度就可以自动布局了。通过使用 justify-content 属性，两个块会分别通过空间分配并自动左右对齐。

结论来说，使用浮动或 flexbox 布局都可以轻松地对齐两个块。视情况而定，在选择布局时要考虑到特定的布局要求以及不同布局方案的优缺点。