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实现双语阅读并排显示效果