内容对齐

Posted 2021-03-15 homehtml

效果如下图

• 使用float

  <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>