作者bernachom (Terry)
看板Web_Design
标题[问题] display:flex 无法自动折行
时间Sun Feb 14 18:41:19 2021
各位朋友好 想询问一下
dispaly:flex 无法自动折行(对齐) 是否能教导一下呢，谢谢。
---------------------------------------------------------
HTML
<!DOCTYPE html>
<html>
<head>
<title>RWD Table Demo</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table class="rwd-table">
<thead>
<tr>
<th>No</th>
<th>ID</th>
<th>Name</th>
<th>Cell Phone</th>
<th>Address</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="No">1</td>
<td data-th="ID">A0001</td>
<td data-th="Name">Craig</td>
<td data-th="Cell Phone">09123456780912345678</td>
<td data-th="Address">YiLan</td>
<td data-th="Birthday">1988/07/04</td>
</tr>
<tr>
<td data-th="No">2</td>
<td data-th="ID">B0002</td>
<td data-th="Name">Vivian</td>
<td data-th="Cell Phone">0998765432<br>0912345678sss</td>
<td data-th="Address">Tainan</td>
<td data-th="Birthday">1988/01/27</td>
</tr>
<tr>
<td data-th="No">3</td>
<td data-th="ID">C0003</td>
<td data-th="Name">Tom</td>
<td data-th="Cell Phone">0974185296</td>
<td data-th="Address">Taipei</td>
<td data-th="Birthday">1990/10/14</td>
</tr>
<tr>
<td data-th="No">4</td>
<td data-th="ID">D0004</td>
<td data-th="Name">Mary</td>
<td data-th="Cell Phone">0936925814</td>
<td data-th="Address">US</td>
<td data-th="Birthday">1978/03/05</td>
</tr>
<tr>
<td data-th="No">5</td>
<td data-th="ID">E0005</td>
<td data-th="Name">Jan</td>
<td data-th="Cell Phone">0912456789</td>
<td data-th="Address">UK</td>
<td data-th="Birthday">1989/04/01</td>
</tr>
</tbody>
</table>
</body>
</html>
-----------------------------------------------
CSS
/*20180123 新增NEW RWD Table*/
.rwd-table th, .rwd-table td {
border: 1px solid ;
padding: 2px 4px;
}
.rwd-table tr:nth-of-type(odd) {
background: #DDDDDD;
}
@media screen and (max-width: 500px) {
.rwd-table tr {
border: 1px solid;
}
.rwd-table th {
display:none ;
}
.rwd-table td {
display:flex;
border: none;
text-align: left;
border-bottom: 1px dotted #ccc;
}
.rwd-table td:before {
content: attr(data-th) " : ";
float: none ;
display: inline-block;
white-space:nowrap;
color: #4A5E03;
font-weight: bold;
width: 6.5em;
padding: 0.2em !important;
}
}
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 1.160.206.133 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1613299281.A.667.html
1F：→ sanyaoooo: flex-wrap 02/14 19:28
2F：→ bernachom: 这个可以 但是无法对齐 02/14 22:02
3F：→ bernachom: 一直找不到方式对齐 02/14 22:02
4F：→ MarcoReus: word-break: break-all 02/14 23:14
5F：→ bernachom: 真的可以自动对齐 感谢 02/15 10:11
6F：→ bernachom: 不过还是有遇到一个问题 在IE下好像不能自动折行 02/15 11:33
7F：→ froce: 你期待ie可以正确显示flex是不是有什麽误会？ 02/16 21:29
8F：→ bernachom: 如果是这样的话，所以RWD下就无法自动对齐折行罗? 02/16 21:36
9F：→ froce: Ie得有特别的其他hack才行，自己去google一下ie flex就知道 02/20 20:20
10F：→ froce: 在ie下的糟糕表现了 02/20 20:20
11F：→ bernachom: 有查过在flex在ie底下 好像有点惨，但我对前端不太熟.. 02/20 20:21
12F：→ bernachom: 如果要折行又要对齐 还有推荐的像flex可使用吗?谢谢~ 02/20 20:22
14F：→ lin009: before 宽度都写死了，padding 也写死应该没关系 (?) 02/21 03:04
15F：→ bernachom: 您好 上面的网址 好像没办法看? 02/24 07:16