效果如下图

内容对齐 随笔

  • 使用float

    SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 
    <div>
    <span style="width:50px;float:left;">名称：</span>
    <div style="margin-left:50px;">这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行...这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行</div>
</div>

  • 使用absolute

        <div style="position:relative">
        <span style="width:50px;position:absolute">名称：</span>
        <div style="margin-left:50px;">这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行...这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行</div>
    </div>

  • 使用table
    绝对没必要，哈哈哈，虽然可以实现效果。
    不过，可以用display:table

    <div style="display:table">
    <div style="display:table-cell;width:50px;">名称：</div>
    <div style="display:table-cell;">这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行...这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行</div>
</div>

  • 弹性布局

    <div style="display:flex">
    <div style="width:50px;">名称：</div>
    <div style="flex:1">这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行...这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行..这里是很长很长的内容，需要换行</div>
</div>
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄