如何將響應式圖像與表格並排對齊
[英]How to align responsive image side by side with table
問題描述
我在右側有一張桌子，我希望左側的圖像與桌子對齊。 問題是在調整頁面大小時，圖像大小不符合表格。
.div-contains{ background-image: url("http://www.castan.pt/castan/wp-content/uploads/2014/07/img-teste-02.jpg"); position: relative; background-repeat: no-repeat; background-size: 100%; }.div-forum{ overflow-x:auto; background-color:white; width:75%; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } th, td { text-align: left; padding: 8px; } tr{ border-bottom: 1px solid #ddd; }
<;DOCTYPE html> <html> <head> <style> </style> </head> <body> <div class="div-contains" > <div class="div-forum" > <table> <tbody> <tr> <td>0</td> <td>1</td> <td>2</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> </tbody> </table> </div> </div> </body> </html>
我想將表格和圖像並排放置，當有人調整屏幕大小時，它們的大小相同。 https://imgur.com/lMNkOdi.png
1 個解決方案
解決方案1
0 已采納 2021-02-12 11:14:17
如果您必須將圖像設置為背景並將其設置在右側，這里是 go：
在您的div-contains設置此屬性：
background-size: 25%; /* From a 100% set 25% as your table width take 75% */
background-position: right; /* set it to the right */
演示
.div-contains{ background-image: url("http://www.castan.pt/castan/wp-content/uploads/2014/07/img-teste-02.jpg"); position: relative; background-repeat: no-repeat; background-size: 25%; /* From a 100% set 25% as your table width take 75% */ background-position: right; /* set it to the right */ }.div-forum{ overflow-x:auto; background-color:white; width:75%; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } th, td { text-align: left; padding: 8px; } tr{ border-bottom: 1px solid #ddd; }
<;DOCTYPE html> <html> <head></head> <body> <div class="div-contains" > <div class="div-forum" > <table> <tbody> <tr> <td>0</td> <td>1</td> <td>2</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> <tr> <td> </td> <td>yrdyr</td> <td>yrdyr</td> </tr> </tbody> </table> </div> </div> </body> </html>
如何將表格中的圖像朝向某行的右側對齊？
[英]How to align an image in a table towards the right side of a row or something?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.