Vue實戰(zhàn)081：多HTML標簽元素如何實現(xiàn)并排顯示詳解

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

HTML元素構建

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

CSS樣式模型

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

float并排顯示

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

overflow:hidden清除浮動

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

clear:both來清除浮動

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

display并排顯示

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

總結：

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

頁效果

CSS

.layout, .layout2{
clear:both;
width:95%;
border:1px dotted #eee;
margin:auto;
margin-bottom:5px;
overflow:hidden;
}
.layout2 .right, .layout2 .left, .layout p{
margin-bottom:-55px;
padding-bottom:55px;
text-align: justify;
margin:0;
padding:0;
margin-left:1%;
margin-right:1%;
}
.layout2 .left, .layout p{
float:left;
width:60%;
font-size:1.0em;
}
.layout2 .right, .layout p+p {
float: left;
width:34%;
border-left:1px dotted #cccccc;
font-size:0.9em;
padding-left:1%;
}
.layout2 .right p, .layout2 .left p, .layout p{
padding-bottom:5px;
}

CSS代碼解釋

.layout, .layout2{}表示同時定義兩個類，類名用逗號“,”分隔；
.layout p{}表示類layout內(nèi)的子選擇符p（段落）；
.layout p+p表示類layout內(nèi)的子選擇符p（段落）后面相鄰的選擇符p（+表示相鄰選擇符）；
相鄰的兩個段落p設置為浮動(float)，即可以實現(xiàn)并排顯示的效果。
.layout2這個類的標簽內(nèi)用類.left和.right浮動，在.left和.right內(nèi)可以放置多個p；

HTML

……
<div class="layout">
<p>"I want you to talk to Mrs. Strickland, " she said. "She's raving about your book. "</p>
<p>“我想讓你去同思特里克蘭德太太談一談，”她說，“她對你的書崇拜得了不得。”</p>
</div>
<div class="layout">
<p>"What does she do?" I asked.</p>
<p>“她是干什么的？”我問。</p>
</div>
<div class="layout">
<p>I was conscious of my ignorance, and if Mrs. Strickland was a well-known writer I thought it as well to ascertain the fact before I spoke to her.</p>
<p>我知道自己孤陋寡聞，如果思特里克蘭德是一位名作家，我在同她談話以前最好還是把情況弄清楚。</p>
</div>
……

借助Excel提高效率

如下圖，利用公式組合文本：

=CONCATENATE("<div class='layout'><p>",A1,"</p>","<p>",B1,"</p>","</div>")

選中第三列的文本，復制到網(wǎng)頁文檔。

－End－

有下面的中英文是交錯排版的：

需要調整為并排排版，效果如下：

首先將交錯排版的文本復制到Excel，如下：

編寫VBA代碼，將英文、中文分別放到單獨的一列，并添加HTML代碼，代碼如下：

Sub 中英文并排顯示()
Dim RowN As Long
Dim i As Long
Dim j As Long
j = 0
RowN = Cells(Rows.Count, "A").End(xlUp).Row
For i = 1 To RowN Step 1
j = i * 2 - 1
ActiveSheet.Range("D" & i).Value = Range("A" & j).Value
ActiveSheet.Range("E" & i).Value = Range("A" & i * 2).Value
Next
For i = 1 To RowN / 2 Step 1
ActiveSheet.Range("F" & i).FormulaR1C1 = _
"=CONCATENATE(""<div class='layout'><p>"",RC[-2],""</p>"",""<p>"",RC[-1],""</p>"",""</div>"")"
Next
Range("F1:F" & (RowN / 2)).Select
End Sub

運行VBA代碼后，Excel數(shù)據(jù)效果如下：

將F列的數(shù)據(jù)復制到html文檔，并編寫CSS代碼，即可達到上述并排顯示中英文的效果。

CSS代碼細節(jié)請見：

CSS｜div+p實現(xiàn)雙語閱讀并排顯示效果