問(wèn)題描述

在這樣一個(gè)結(jié)構(gòu)中，如何讓該行數(shù)據(jù)，當(dāng)某個(gè)span文字太長(zhǎng)時(shí)，能自動(dòng)換行，然后在小屏及大屏4個(gè)項(xiàng)能平均分配寬度，自適應(yīng)那樣呢 ？應(yīng)該如何用樣式控制比較好？求救！謝謝

問(wèn)題解答

是要這個(gè)效果嗎？

寬度變化也沒(méi)問(wèn)題

html:

<p class='line_block'> <p class='line_data'><p class='xxx'> <label>項(xiàng)目名稱：</label> <span class='w-130'>測(cè)試信息學(xué)校信息尋尋</span></p> </p> <p class='line_data'><p class='xxx'> <label>項(xiàng)目名稱：</label> <span class='w-130'>測(cè)試信息學(xué)校信息尋尋</span></p> </p> <p class='line_data'><p class='xxx'> <label>項(xiàng)目名稱：</label> <span class='w-130'>測(cè)試信息學(xué)校信息尋尋</span></p> </p> <p class='line_data'><p class='xxx'> <label>項(xiàng)目名稱：</label> <span class='w-130'>測(cè)試信息學(xué)校信息尋尋</span></p> </p></p>

css:

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

多加了一個(gè)p用來(lái)加個(gè)padding，要不都擠在一起不好看，可以去掉。