关于label span组成的展示表格,如何控制它的宽度

clipboard.png

clipboard.png

在这样一个结构中,如何让该行数据,当某个span文字太长时,能自动换行,
然后在小屏及大屏4个项能平均分配宽度,自适应那样呢 ?应该如何用样式控制比较好?求救!谢谢

阅读 3.8k
1 个回答

是要这个效果吗?

clipboard.png

宽度变化也没问题

clipboard.png

html:

<div class="line_block">
    <div class="line_data">
        <div class="xxx">
            <label>项目名称:</label>
            <span class="w-130">测试信息学校信息寻寻</span>
        </div>
    </div>
    <div class="line_data">
        <div class="xxx">
            <label>项目名称:</label>
            <span class="w-130">测试信息学校信息寻寻</span>
        </div>
    </div>
    <div class="line_data">
        <div class="xxx">
            <label>项目名称:</label>
            <span class="w-130">测试信息学校信息寻寻</span>
        </div>
    </div>
    <div class="line_data">
        <div class="xxx">
            <label>项目名称:</label>
            <span class="w-130">测试信息学校信息寻寻</span>
        </div>
    </div>
</div>

css:

.line_block{
    width: 100%;
    font-size: 0;
}
.line_data{
    display: inline-block;
    vertical-align: top;
    width: 25%;
    font-size: 14px;
}
.xxx{
    padding: 10px;
}

多加了一个div用来加个padding,要不都挤在一起不好看,可以去掉。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题