如何实现与本示例html/css/js相同的卡片视图块? [英] How to implement a card-view block same as this example html/css/js?

查看：49 发布时间：2021/5/29 19:41:45 javascript html css latex

本文介绍了如何实现与本示例html/css/js相同的卡片视图块?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

就像这个示例一样，是由 latex 的 tcoloredbox 构建的.

Just like this example build by tcoloredbox of latex.

我的问题是:

如何 Loi image </code>部分的标题根据句子的长度<strong>进行调整</strong>?</li><li>如何使标题的位置(仍然是<code> Loi图片</code>部分)具有<strong>可更改的位置</strong>?纯CSS可以解决这个问题吗?</li><li>如果我想<strong>单击/悬停</strong>标题时<strong>标题句子</strong>被更改</strong>，我该怎么做?</li><em class="showen"></em></ol> <ol class="en"> <li>how to make the title, the <code>Loi image</code> part, be <strong>adjusted by sentence length</strong>?</li> <li>how to make the position of the title, still the <code>Loi image</code> part, has a <strong>changeable position</strong>? Can pure css work this out?</li> <li>if I want the <strong>title sentence</strong> be <strong>changed</strong> when I <strong>click/hover</strong> the title, how should I do that?</li> </ol> <p class="cn">好的，我认为数学方程式确实是一个问题，这是有关该问题的新文章:<a href="https://stackoverflow.com/questions/67114931/how-to-render-markdown-language-in-html-blocks">新帖子</a>.<em class="showen"></em></p> <p class="en">Ok, I have relaize that the math equations are indeed a problem, here is a new post about the problem: The new post.</p> <h3 class="best_ans mt-1">推荐答案</h3> <p class="cn">像这样吗?</p> <p class="cn"> <a href="https://codepen.io/seanstopnik/pen/f4482b76c1a6973f0f57b9f606c62e16" rel="nofollow noreferrer"> https://codepen.io/seanstopnik/pen/f4482b76c1a6973f0f57b9f606c62e16 </a> </p> <p class="cn"></p> <div class="cn"></div> <div class="cn"></div> <pre><code><code>/* For demo only */ body { padding: 60px; } /* Example */ .box { position: relative; border: 1px solid #000; border-radius: 10px; padding: 10px; } .box:not(:last-child) { margin-bottom: 40px; } .box__title { position: absolute; color: #fff; font-size: 16px; font-weight: 400; line-height: 30px; border-radius: 8px; background-color: #000; padding: 0 6px; } .box__title--top-left { top: -52px; left: 10px; } .box__title--top-right { top: -52px; right: 10px; } .box__title--bottom-left { bottom: -52px; left: 10px; } .box__title--bottom-right { bottom: -52px; right: 10px; }</code></code></pre> <p class="cn"></p> <pre><code><code><div class="box"> <h6 class="box__title box__title--top-left">This is a title</h6> <p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p> </div> <div class="box"> <h6 class="box__title box__title--top-right">This is a title</h6> <p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p> </div> <div class="box"> <h6 class="box__title box__title--bottom-left">This is a title</h6> <p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p> </div> <div class="box"> <h6 class="box__title box__title--bottom-right">This is a title</h6> <p class="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p> </div></code></code></pre> <p class="cn"></p> <p class="cn"></p> <p class="cn"></p> <p>这篇关于如何实现与本示例html/css/js相同的卡片视图块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2289705');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="onItemClick不工作的卡片视图" href="/145283.html"> onItemClick不工作的卡片视图; </a> </li> <li> <a target="_blank" title="Bootstrap 4 列中相同高度的卡片" href="/2645037.html"> Bootstrap 4 列中相同高度的卡片; </a> </li> <li> <a target="_blank" title="Bootstrap 4列中相同高度的卡片" href="/862404.html"> Bootstrap 4列中相同高度的卡片; </a> </li> <li> <a target="_blank" title="VISTA上的卡片" href="/1270168.html"> VISTA上的卡片; </a> </li> <li> <a target="_blank" title="如何使用固定宽度的卡片制作卡片组?" href="/2710871.html"> 如何使用固定宽度的卡片制作卡片组?; </a> </li> <li> <a target="_blank" title="如何知道我输入的卡片类型" href="/1110217.html"> 如何知道我输入的卡片类型; </a> </li> <li> <a target="_blank" title="检测带圆角的卡片边缘" href="/922169.html"> 检测带圆角的卡片边缘; </a> </li> <li> <a target="_blank" title="Android的卡片视图在卡之间的细灰线" href="/136621.html"> Android的卡片视图在卡之间的细灰线; </a> </li> <li> <a target="_blank" title="为什么我的卡片视图无法绘制到画布上?" href="/1910877.html"> 为什么我的卡片视图无法绘制到画布上?; </a> </li> <li> <a target="_blank" title="如何创建带有角材料的卡片网格?" href="/2528710.html"> 如何创建带有角材料的卡片网格?; </a> </li> <li> <a target="_blank" title="如何在 CardLayout 中显示不同的卡片?" href="/2863808.html"> 如何在 CardLayout 中显示不同的卡片?; </a> </li> <li> <a target="_blank" title="javascript - 如何使用HTML、CSS与JS实现是非题" href="/716216.html"> javascript - 如何使用HTML、CSS与JS实现是非题; </a> </li> <li> <a target="_blank" title="通过单击显示以前的卡片和单击的卡片并隐藏角度 6 中的其他索引" href="/2468482.html"> 通过单击显示以前的卡片和单击的卡片并隐藏角度 6 中的其他索引; </a> </li> <li> <a target="_blank" title="Bootstrap 中可水平滚动的卡片列表" href="/2710548.html"> Bootstrap 中可水平滚动的卡片列表; </a> </li> <li> <a target="_blank" title="尝试使用带角材料的卡片网格" href="/2528307.html"> 尝试使用带角材料的卡片网格; </a> </li> <li> <a target="_blank" title="动态制作带有文本和按钮的卡片" href="/2227011.html"> 动态制作带有文本和按钮的卡片; </a> </li> <li> <a target="_blank" title="以随机顺序显示CardLayout的卡片吗?" href="/1547246.html"> 以随机顺序显示CardLayout的卡片吗?; </a> </li> <li> <a target="_blank" title="尝试使用带角材料的卡片网格" href="/2521784.html"> 尝试使用带角材料的卡片网格; </a> </li> <li> <a target="_blank" title="如何在 Java CardLayout 中的卡片之间传递数据" href="/2427905.html"> 如何在 Java CardLayout 中的卡片之间传递数据; </a> </li> <li> <a target="_blank" title="我如何使用python opencv相互分离重叠的卡片？" href="/2014629.html"> 我如何使用python opencv相互分离重叠的卡片？; </a> </li> <li> <a target="_blank" title="如何在引导Vue的卡片组组中制作滑块?" href="/1974933.html"> 如何在引导Vue的卡片组组中制作滑块?; </a> </li> <li> <a target="_blank" title="如何在 bootstrap vue 的卡片组组中制作滑块?" href="/2868773.html"> 如何在 bootstrap vue 的卡片组组中制作滑块?; </a> </li> <li> <a target="_blank" title="计算涵盖的卡片区域中随机放在桌上" href="/66135.html"> 计算涵盖的卡片区域中随机放在桌上; </a> </li> <li> <a target="_blank" title="如何通过 Trello API 检索板上所有存档的卡片?" href="/2377546.html"> 如何通过 Trello API 检索板上所有存档的卡片?; </a> </li> <li> <a target="_blank" title="如何使用 ngFor 和 bootstrap 4 创建新的卡片行" href="/2710867.html"> 如何使用 ngFor 和 bootstrap 4 创建新的卡片行; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '如何,实现,与,本,示例,html,css,js,相同,的,卡片,视,图块'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section>  <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>