我研究 table 一段時(shí)間了，正在考慮創(chuàng)造一些東西。數(shù)據(jù)將存儲在數(shù)據(jù)庫中（個(gè)人資料圖像、姓名、描述、日期和點(diǎn)贊）。我正在嘗試創(chuàng)建這樣的內(nèi)容：https ://i.ibb.co/k2LM4ch/Untitled.png因此數(shù)據(jù)庫表中的每一行都有它自己的卡片視圖（或列表視圖，不確定其名稱是什么）。有人可以幫助我找到正確的道路嗎，因?yàn)槲也恢廊绾巫龅竭@一點(diǎn)，甚至表格也是正確的方法嗎？
2 回答
縹緲止盈
TA貢獻(xiàn)2041條經(jīng)驗(yàn) 獲得超4個(gè)贊
這個(gè)答案只涉及問題的 HTML + CSS 部分，而且非常簡單?？赡苄枰嗟臉邮?。請參閱 SQL/PHP 解決方案的其他答案。您可以通過多種方式設(shè)計(jì)“卡片”（定位、浮動(dòng)、Flex 或網(wǎng)格布局）給出的示例是使用 Flex 完成的（目前只是個(gè)人喜好）：
.card {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: flex-start;
border: 1px solid black;
}
.card_img {
flex: 0 1 100px;
padding: 5px;
}
.card_content {
flex: 1 0 70%;
}
.card_content > h3 {
margin: 0;
font-size: 1.5rem;
font-weight: bold;
}
.card_content > footer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
<div class="card">
<div class="card_img"><img src="https://picsum.photos/100/100"></div>
<div class="card_content">
<h3>Joe Schmoe</h3>
<p>Lorem ipsum dolor sit amet ... </p>
<footer>
<button>Button</button>
<span>some text here</span>
</footer>
</div>
</div>
斯蒂芬大帝
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
這是一個(gè)簡單的示例，其中包含您提供的信息：
$query=$mysqli->prepare('select * from table');
$query->execute();
$result=$query->get_result();
echo '<table>';
while($res=$result->fetch_array()){
$name=$res['name'];
$thumb=$res['thumbsup'];
echo "<tr><td><img src='$thumb'>$name <br> Hello <br> <button>test</button></td></tr>"
}
echo '</table>'
當(dāng)然，您必須根據(jù)您的需要更改代碼。例如@Ludovit Mydla 所說的兩列使用 flex/grid
- 2 回答
- 0 關(guān)注
- 126 瀏覽
添加回答
舉報(bào)
0/150
提交
取消