[研究][ASP.NET]CSS Grid Item 的 Bug 迴避
2023-03-20
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#
********************************************************************************
發現網站導覽一些區塊排列順序不如預期 ( Code 類似下面)，經檢查，假設9個，一橫列顯示3個區塊，第4塊出現於第1,2,3區塊橫列數最少的下方，而不一定是第二橫列最左方。避開Bug方法，讓每個區塊的<li>數量一致，不足的補上 <li> </li>。
調整後發現仍有問題，因為有的<li>項目，顯示文字太長，自動換行，占用了2橫列，重新統計9個區塊每個區塊的顯示列數，而非 <li> 數量，以最大值為主，其他都補放 <li> </li>，這次正常了。
Default.html
<div class="grid">
<div class="grid-item ml-sitemap-box">
<div class="title"><a href="#" title="AAAAA">AAAAA</a></div>
<ul>
<li><a href="bb.aspx?lang=zh" title="BBBBB">BBBBB</a></li>
<li><a href="cc.aspx?lang=zh" title="CCCCC">CCCCC</a></li>
<li><a href="dd.aspx?lang=zh" title="DDDDD">CCCCC</a></li>
</ul>
</div>
<div class="grid-item ml-sitemap-box">
<div class="title"><a href="#" title="XXXXX">XXXXX</a></div>
<ul>
<li><a href="yy.aspx?lang=zh" title="YYYYY">YYYYY</a></li>
<li><a href="zz.aspx?lang=zh" title="ZZZZZ">ZZZZZ</a></li>
<li> </li>
</ul>
</div>
</div>
ㄗ |
此作法並沒有修正 Gird 本身問題，只是用某些做法避開 Bug 。
(完)
相關
CSS Grid Item
https://www.w3schools.com/css/css_grid_item.asp
沒有留言:
張貼留言