[分享]css两个块状元素如何并排

CSS中，要实现两个块状元素并排，可以使用float属性或display属性。使用float属性: 这是左边的块状元素 这是右边的块状元素 使用display属性: 这是左边的块状元素 ...

CSS中，要实现两个块状元素并排，可以使用float属性或display属性。

使用float属性:

 <div style="float: left; width: 50%;">
        <p>这是左边的块状元素</p>
    </div>
    <div style="float: right; width: 50%;">
        <p>这是右边的块状元素</p>
    </div> 

使用display属性:

 <div style="display: inline-block; width: 50%;">
        <p>这是左边的块状元素</p>
    </div>
    <div style="display: inline-block; width: 50%;">
        <p>这是右边的块状元素</p>
    </div> 

上述代码使用了两种方法实现了两个块状元素并排。其中，float属性可以让元素脱离文档流，同时从左/右侧浮动至父元素的左/右侧。而display属性则可以改变元素的显示方式，使其像行内元素一样排列在同一行。