内容对齐
作者:互联网
效果如下图
-
使用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>
标签:需要,很长,..,换行,内容,对齐,这里 来源: https://www.cnblogs.com/homehtml/p/12208162.html