前端對多個(gè)相同的標(biāo)簽元素進(jìn)行有序的排列是非常常見的需求，當(dāng)我們有多個(gè)相似功能出現(xiàn)在同一個(gè)區(qū)域時(shí)我們就需要合理的排列這些元素。比如我這里的云服務(wù)提供了多個(gè)功能模塊展示給用戶，這個(gè)時(shí)候我們就會(huì)將每個(gè)模塊所涉及到的內(nèi)容打包成一個(gè)整體來設(shè)計(jì)。

HTML元素構(gòu)建

在Vue相似的功能展現(xiàn)我們可以通過v-for來實(shí)現(xiàn)，modulars中的數(shù)據(jù)我們口可以通過登錄直接從后臺(tái)獲取。這樣不管有多少個(gè)模塊我們都可以快速的實(shí)現(xiàn)DOM元素的渲染，也可以減少樣式的書寫，提高代碼執(zhí)行效率。這里每個(gè)mould都是一個(gè)功能模塊的組合，里面包含了標(biāo)題、圖片、和功能描述等信息。

CSS樣式模型

元素排序主要是通過CSS樣式表來完成，我們都知道每個(gè)div盒子（class="mould"）的默認(rèn)樣式屬性是獨(dú)占一行顯示，要想解決div獨(dú)占一行方法通常有兩種要么將該div設(shè)置浮動(dòng)要么就設(shè)置display樣式。而父級(jí)的div高度通常由內(nèi)容撐開，寬度通?？梢杂酶讣?jí)容器的百分百進(jìn)行設(shè)定。

float并排顯示

float可以定義元素的浮動(dòng)屬性，使元素向左或向右移動(dòng)來實(shí)現(xiàn)布局效果，常用來配合div標(biāo)簽做網(wǎng)頁布局。float會(huì)使該元素脫離文檔流但仍然會(huì)占據(jù)位置（浮動(dòng)元素會(huì)生成一個(gè)區(qū)域塊，不管是何種標(biāo)簽元素都可以），其他相鄰的元素則會(huì)無視設(shè)置float屬性的元素緊跟其后繼續(xù)排列。如果對當(dāng)前的所有元素設(shè)置浮動(dòng)，那么就會(huì)當(dāng)前的所有元素就會(huì)依次排列。所以利用float屬性可以實(shí)現(xiàn)并排顯示的效果，當(dāng)然用完float浮動(dòng)別忘了清除浮動(dòng)。

overflow:hidden清除浮動(dòng)

標(biāo)簽元素通過float浮動(dòng)后不屬于html文檔流，浮動(dòng)之后的元素如果需要回到文檔流中就需要將前面的浮動(dòng)清除。清除浮動(dòng)有多種方式可以實(shí)現(xiàn)，最簡單的方式就是在父級(jí)使用overflow:hidden來清除浮動(dòng)。"overflow:hidden"可以溢出隱藏，設(shè)置該屬性可以將內(nèi)容區(qū)域超出來的部分隱藏使內(nèi)容區(qū)域完全包含在該包含塊中。利用該屬性可以讓父元素包住這個(gè)脫離了文檔流的浮動(dòng)元素，以達(dá)到清除包含塊內(nèi)子元素的浮動(dòng)影響。

clear:both來清除浮動(dòng)

當(dāng)然也可以用clear:both來清除浮動(dòng)，clear可以指定元素對象不允許有浮動(dòng)。利用clear:both清除浮動(dòng)可以把float的元素拽回文檔流，實(shí)現(xiàn)方法可以在浮動(dòng)元素的尾部添加一個(gè)空的div標(biāo)簽并設(shè)置 clear:both屬性 或在下一個(gè)元素上加clear:both，可以可以在父級(jí)div定義創(chuàng)建偽元素:after設(shè)置clear:both屬性 。

display并排顯示

display有兩種屬性情況分別是inline（同行顯示）和flex（彈性布局），display:inline屬性可以讓元素對象實(shí)現(xiàn)同行并排顯示（這個(gè)不是我們現(xiàn)在需要的效果）。display:flex是我們非常喜歡的的彈性布局方式，可以簡潔、快速的實(shí)現(xiàn)想要的彈性布局效果。定義了display:flex屬性之后可以通過 justify-content 屬性調(diào)整子元素的水平對齊方式，通過align-items屬性調(diào)整子元素的垂直對齊方式。當(dāng)父元素寬度不夠時(shí)flex默認(rèn)會(huì)等比例壓縮（不會(huì)自動(dòng)換行），這時(shí)候我們需要通過設(shè)置 flex-wrap屬性（默認(rèn)為 nowrap，這里指定wrap）來使其換行即可。

總結(jié)：

以上內(nèi)容是小編給大家分享的【Vue實(shí)戰(zhàn)081：多HTML標(biāo)簽元素如何實(shí)現(xiàn)并排顯示詳解】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。更多Vue實(shí)戰(zhàn)技巧可以參考以下專欄：

嘍大家好，我是胖達(dá)。本期視頻來看看路徑相關(guān)的內(nèi)容。我們知道在網(wǎng)頁中存在很多的圖片，如果把這些圖片和html文檔放在一起，這樣不光不美觀，管理起來也非常不方便。通常會(huì)新建一個(gè)專門用來管理圖像資源的文件夾，當(dāng)需要查找圖像的時(shí)候就會(huì)選擇使用路徑的方式來指定圖像文件的位置。

路徑的類型又分為兩種，第一種是相對路徑，第二種是絕對路徑。今天先來了解一下相對路徑。相對路徑是相對于當(dāng)前文件的位置來表示資源，也就是圖片位置的路徑表達(dá)方式。簡單來說就是圖片相對于當(dāng)前html文檔的位置。這里把相對路徑的分類給大家列出來了，一個(gè)一個(gè)往下看。

·首先是同級(jí)路徑。同級(jí)路徑不需要在html里面寫任何符號(hào)，只需要將文件名寫到html屬性里就可以了。在代碼里看一下，這里有一個(gè)image，點(diǎn)jpg的圖片和html文檔處于同一級(jí)，所以在html的屬性里直接寫image，點(diǎn)jpg保存一下看看效果。

可以看到現(xiàn)在圖片是正常展示的，同級(jí)路徑下只需要在html屬性里完整填寫圖像文件的名稱就可以了。

·再來看第二個(gè)下級(jí)路徑。當(dāng)圖像文件位于html文件下一集時(shí)，需要在html屬性里完整填寫同級(jí)文件夾的名稱，然后斜杠寫出對應(yīng)圖片文件的名稱。

→首先打開資源文件夾，在這里新增一個(gè)images的文件夾。將image圖片文件復(fù)制一份放到images文件夾里。

→打開vscode，新建一個(gè)gtml文檔，這里新增一個(gè)image標(biāo)簽。

→在左側(cè)資源管理器中剛剛新增的images文件夾已經(jīng)顯示出來了，打開以后會(huì)發(fā)現(xiàn)里面有一個(gè)image，點(diǎn)jpg的圖片。把這個(gè)路徑寫一下，在src屬性里面寫入位于當(dāng)前html文件同級(jí)的images文件夾的名稱，使用符號(hào)斜杠找到image，點(diǎn)gpg，看一下效果。此時(shí)圖片也完整顯示出來了。

→如果在amager四文件夾里還有一個(gè)amager四文件夾，下級(jí)路徑又該怎么寫？在amager文件夾里再新建一個(gè)文件夾，打開vscod，在左側(cè)的資源管理器中a major s文件夾下面又新增了一個(gè)a major s文件夾，在這里面又放了一張圖片。

這張圖片應(yīng)該怎樣讓它展示出來？一起來看一下。

→首先找到同級(jí)的images文件夾，使用符號(hào)斜杠，此時(shí)vscode會(huì)提供給兩個(gè)選項(xiàng)，一個(gè)是imagers文件夾，另一個(gè)是imager.gpg。選擇imagers，imagers文件夾里面的imager.gpg的文件了，保存一下看看效果。

在瀏覽器中這兩張圖片都完美的展現(xiàn)出來了。

最后來看一下相對路徑里面的。上級(jí)路徑使用的符號(hào)是點(diǎn)點(diǎn)杠。上級(jí)路徑又應(yīng)該怎么理解？也就是圖像文件是位于當(dāng)前這個(gè) hd ml文件的上一集。

在練習(xí)文件夾里新增一個(gè)名為 hd ml的文件夾，打開vs code，選擇剛剛新增的文件夾，選擇新建文件，這里需要新增一個(gè) hd ml文檔。在當(dāng)前 hd ml文檔中，如果想要調(diào)用上一級(jí)的 image 點(diǎn) j p g 的圖片應(yīng)該怎么做？在 sr c 屬性里面使用點(diǎn)點(diǎn)杠。

這里 vs code提供了上一集路徑中存在的文件，選擇 image 點(diǎn) j p g，在瀏覽器中看下效果，此時(shí)圖片也是正常顯示的。如果hd ml文件藏得更深一些，把當(dāng)前的文件復(fù)制一份，新增一個(gè)hd ml文件夾，將復(fù)制的文檔粘貼一下，打開剛剛復(fù)制的文檔，修改sr c屬性里面的值，使用點(diǎn)點(diǎn)杠。

此時(shí)是沒有找到 amage 點(diǎn) j p g 的文件，這個(gè)時(shí)候就需要重復(fù)剛剛的操作，點(diǎn)點(diǎn)杠就能找到需要到的 amage 點(diǎn) jbg 的文件了，保存一下看看效果。這里可以看到圖片還是正常顯示出來了。

本期視頻主要了解了相對路徑的三種分類，一個(gè)是同級(jí)路徑，一個(gè)是下級(jí)路徑，還有一個(gè)是上級(jí)路徑。希望小伙伴們下來可以好好練習(xí)一下，這對于后期的內(nèi)容非常重要。下期再來聊聊絕對路徑。本期的內(nèi)容到此結(jié)束，感謝觀看，下期再見。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 196px;
height: 150px;
border: 1px solid red;
}
p{
width: 196px;
height: 40px;
background-color: red;
}
img{
/* 方法① */
/* vertical-align: bottom(top|middle) */
/* 方法② */
/* display: block; */
}
</style>
</head>
<body>
<div>
<img src="img/img1.png"/>
<p>這是一段文字</p>
</div>
</body>
</html>

片與文字之間存在間隙(空白), 解決方法有兩個(gè)

vertical-align: bottom(top|middle); 任意一個(gè)屬性

display:block; 將圖片轉(zhuǎn)換為塊元素

vertical-align：指定元素的垂直對齊方式

top 把元素的頂端與行中最高元素的頂端對齊

middle 把此元素放置在父元素的中部。

bottom 把元素的頂端與行中最低的元素的頂端對齊。