首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

jQuery 圖片右浮動佈局:隱藏後自動靠右對齊

     編輯:程式設計綜合問答

需求

一排 8 張圖片,隱藏右側幾張後,剩餘圖片自動向右靠齊。

解法:CSS 右浮動

.floatright img { float: right; margin-left: 5px; }

容器寬度足夠時,圖片會從右向左排列;隱藏 DOM 節點(`display:none`)後,剩餘元素自動重排,無需 JS 干預。

完整示例

<div class="floatright">
  <img src="1.jpg"/> ... <img src="8.jpg"/>
</div>
<script>
setTimeout(() => {
  $('div.floatright img:eq(3), div.floatright img:eq(2)').hide();
}, 1000);
</script>
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved