Vue實戰081：多HTML標簽元素如何實現并排顯示詳解

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

HTML元素構建

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

CSS樣式模型

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

float并排顯示

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

overflow:hidden清除浮動

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

clear:both來清除浮動

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

display并排顯示

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

總結：

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

頁效果

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內的子選擇符p（段落）；
.layout p+p表示類layout內的子選擇符p（段落）后面相鄰的選擇符p（+表示相鄰選擇符）；
相鄰的兩個段落p設置為浮動(float)，即可以實現并排顯示的效果。
.layout2這個類的標簽內用類.left和.right浮動，在.left和.right內可以放置多個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>")

選中第三列的文本，復制到網頁文檔。

－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數據效果如下：

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

CSS代碼細節請見：

CSS｜div+p實現雙語閱讀并排顯示效果