父級設置最大寬度,其寬度自適應子級中的內容

父級寬度自適應

1.父級限制最大寬度
2.子級豎著排放,每列的個數明確
3.父級的寬度跟隨子級元素的個數變化寬度
tips: 因為父級要設置"background-color"屬性,所以父級DIV必須要給明確的寬高,這就意味著純CSS自適應寬度無法做到(好吧,是我做不到)

HTML

<template><div class="apps"><div class="parent"><ulv-for="(item, index) in parentList":key="index"@mouseover="mouseoverParent(index)"@mouseout="mouseoutParent(index)"class="parent-ul"><li>觸摸條件-{{ item }}</li></ul><divclass="other-div"@mouseover="mouseoverOther()"@mouseout="mouseoutOther()"><ul v-for="(item, index) in mockContentList" :key="index"><li>內容-{{ item }}</li></ul></div></div></div>
</template>

data

      parentList: [1, 2, 3, 4, 5], mockContentList: undefined,index: 0, // 緩存左側欄選擇的第幾項的indexwidth1: '120px',width2:

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/35926.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/35926.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/35926.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

茴香豆接入微信個人助手部署

將rag產品接入微信工作群&#xff0c;自動回答問題&#xff0c;香嗎&#xff1f;&#xff1f; let‘s go 1、打開openxlab平臺&#xff0c;找到茴香豆web產品應用中心-OpenXLab 點擊進入&#xff0c;設置知識庫名字和密碼 2、上傳知識庫文件和編輯正反例等 3、然后進行測試問答…

電腦開機之后屏幕沒有任何顯示?怎么檢查?

前言 最近有很多小伙伴來咨詢&#xff0c;自己的電腦開機之后&#xff0c;屏幕真的是一點顯示都沒有&#xff0c;只有CPU風扇在轉。 這個情況小白經常經常經常遇到&#xff0c;所以寫一篇關于這個問題的排查教程。按照這個教程來排查&#xff0c;除非真的是硬件損壞&#xff…

算法第八天:leetcode234.回文鏈表

給你一個單鏈表的頭節點 head &#xff0c;請你判斷該鏈表是否為回文鏈表。如果是&#xff0c;返回 true &#xff1b;否則&#xff0c;返回 false 。 示例 1&#xff1a; 輸入&#xff1a;head [1,2,2,1] 輸出&#xff1a;true示例 2&#xff1a; 輸入&#xff1a;head [1,2…

面向對象編程——python

目錄 一、面向對象編程 1.1 類和對象 1.2 繼承 1.3 封裝 1.4 多態 1.5 Python中的面向對象編程 二、類、對象和變量 2.1 類&#xff08;Class&#xff09; 2.2.1 類的屬性&#xff08;Class Attributes&#xff09; 2.2.2 類的方法&#xff08;Class Methods…

對類與對象的(二)補充

1.Date這樣的構造函數 析構函數 拷貝構造 默認構造函數有三種 &#xff1a;全缺省的構造函數 無參的構造函數 和編譯器默認生成的構造函數 class Date {pubilc&#xff1a;void Print&#xff08;&#xff09; { } private&#xff1a;//全缺省的int year1;int month1;int …

二叉樹的廣度優先搜索(層次遍歷)

目錄 定義 層序遍歷的數據結構 實現過程簡述 具體代碼 定義 層序遍歷就是從左到右一層一層地遍歷二叉樹。 層序遍歷的數據結構 層序遍歷需要借用一個輔助數據結構實現&#xff0c;由于隊列具有先進先出的特性&#xff0c;符合一層一層遍歷的邏輯&#xff0c;而棧先進后出…

PHP框架之Laravel框架

Laravel框架詳解 Laravel&#xff0c;作為一款廣受歡迎的PHP Web開發框架&#xff0c;以其優雅、簡潔的語法和強大的功能特性&#xff0c;贏得了全球眾多開發者的青睞。下面&#xff0c;我們將從Laravel的特點、應用案例以及具體的框架使用等方面進行詳細解析。 一、Laravel框…

甲子光年專訪天潤融通CEO吳強:客戶經營如何穿越低速周期?

作者&#xff5c;陳楊、編輯&#xff5c;栗子 社會的發展從來都是從交流和聯絡開始的。 從結繩記事到飛馬傳信&#xff0c;從電話電報到互聯網&#xff0c;人類的聯絡方式一直都在隨著時代的發展不斷進步。只是傳統社會通信受限于技術導致效率低下&#xff0c;對經濟社會產生影…

LLaMA:挑戰大模型Scaling Law的性能突破

實際問題 在大模型的研發中,通常會有下面一些需求: 計劃訓練一個10B的模型,想知道至少需要多大的數據?收集到了1T的數據,想知道能訓練一個多大的模型?老板準備1個月后開發布會,給的資源是100張A100,應該用多少數據訓多大的模型效果最好?老板對現在10B的模型不滿意,想…

退市新規解讀—財務類強制退市

一、退市風險警示&#xff1a;第一年觸及相關指標 上市公司最近一個會計年度觸及下列退市風險指標之一&#xff0c;公司股票或存托憑證被實施退市風險警示(*ST)&#xff1a; 第1項 組合類財務指標 僅發行A股或B股&#xff0c;最近一個會計年度或追溯重述后最近一個會計年度 …

Leetcode 102.目標和

給定一個正整數數組 nums 和一個整數 target 。 向數組中的每個整數前添加 ‘’ 或 ‘-’ &#xff0c;然后串聯起所有整數&#xff0c;可以構造一個 表達式 &#xff1a; 例如&#xff0c;nums [2, 1] &#xff0c;可以在 2 之前添加 ‘’ &#xff0c;在 1 之前添加 ‘-’ &…

C#面:C#屬性能在接口中聲明嗎?

在C#中&#xff0c;接口是一種定義了一組方法、屬性和事件的類型。在接口中&#xff0c;只能聲明方法、屬性和事件的簽名&#xff0c;而不能包含字段、構造函數或實現代碼。因此&#xff0c;C#屬性不能直接在接口中聲明。 然而&#xff0c;你可以在接口中定義屬性的簽名&#…

VMware的具體使用

&#x1f4d1;打牌 &#xff1a; da pai ge的個人主頁 &#x1f324;?個人專欄 &#xff1a; da pai ge的博客專欄 ??寶劍鋒從磨礪出&#xff0c;梅花香自苦寒來 目錄 一&#x1f324;?VMware的安…

用戶登錄錯誤次數太多鎖定賬號

當用戶登錄驗證碼錯誤次數太多時&#xff0c;需要限制用戶在10分鐘之內不能再次登錄。 限制方案&#xff1a; 1.通過Redis ZSet key可以設置為用戶名&#xff0c;value可以設置為UUID&#xff0c;score設置為當前時間戳 每次用戶登錄時&#xff0c;通過 rangeByScore 查詢對…

Ubuntu22安裝PyCharm

下載&#xff08;社區版&#xff09; 官網下載地址 解壓 sudo tar -xzvf pycharm-community-2024.1.4.tar.gz 軟件移動到指定目錄下&#xff08;根據不同版本修改&#xff09; sudo mv pycharm-community-2024.1.4/ /usr/local/PyCharm/運行 cd /usr/local/PyCharm/pycha…

使用PEFT庫進行ChatGLM3-6B模型的LORA高效微調

PEFT庫進行ChatGLM3-6B模型LORA高效微調 LORA微調ChatGLM3-6B模型安裝相關庫使用ChatGLM3-6B模型GPU顯存占用準備數據集加載模型加載數據集數據處理數據集處理配置LoRA配置訓練超參數開始訓練保存LoRA模型模型推理從新加載合并模型使用微調后的模型 LORA微調ChatGLM3-6B模型 本…

6 序列數據和文本的深度學習

6.1 使用文本數據 文本是常用的序列化數據類型之一。文本數據可以看作是一個字符序列或詞的序列。對大多數問題&#xff0c;我們都將文本看作詞序列。深度學習序列模型(如RNN及其變體)能夠從文本數據中學習重要的模式。這些模式可以解決類似以下領域中的問題&#xff1a; 自然…

JVM專題十一:JVM 中的收集器一

上一篇JVM專題十&#xff1a;JVM中的垃圾回收機制專題中&#xff0c;我們主要介紹了Java的垃圾機制&#xff0c;包括垃圾回收基本概念&#xff0c;重點介紹了垃圾回收機制中自動內存管理與垃圾收集算法。如果說收集算法是內存回收的方法論&#xff0c;那么垃圾收集器就是內存回…

【開發者推薦】告別繁瑣:一鍵解鎖國產ETL新貴,Kettle的終結者

在數字化轉型的今天&#xff0c;數據集成的重要性不言而喻。ETL工具作為數據管理的核心&#xff0c;對企業決策和運營至關重要。盡管Kettle廣受歡迎&#xff0c;但國產ETL工具 TASKCTL 以其創新特性和卓越性能&#xff0c;為市場提供了新的選擇。 TASKCTL概述 TASKCTL 是一款免…

wget之Win11中安裝及使用

wget之Win11中安裝及使用 文章目錄 wget之Win11中安裝及使用1. 下載2. 安裝3. 配置環境變量4. 查看及使用1. 查看版本2. 幫助命令3. 基本使用 1. 下載 下載地址&#xff1a;https://eternallybored.org/misc/wget 選擇對應的版本進行下載即可 2. 安裝 將下載后的wget-1.21.4-w…