Css 如何在tablet（md）视图中将第二行文本与第一行文本对齐

*{
框大小：边框框；
字体系列：Helvetica；
}
.行{
宽度：100%；
}
.剖面标题1、.剖面标题2、.剖面标题3{
位置：绝对位置；
宽度：60px；
高度：20px；
边框：1px纯黑；
顶部：0px；
右：0px；
文本对齐：居中；
}
.第节标题1{
背景色：红色；
}
.第节标题2{
背景色：青色；
}
.第节标题3{
背景颜色：浅蓝色；
}
.第1节、第2节、第3节{
位置：相对位置；
文本对齐：对齐；
宽度：90%；
左边距：自动；
右边距：自动；
边框：1px纯黑；
填充：25px；
}
.第1节{
背景颜色：粉红色；
}
.第2节{
背景颜色：绿色；
}
.第3节{
背景颜色：黄色；
}
h1{
利润率：20px；
文本对齐：居中；
}
@介质（最小宽度：992px）{
.col-lg-4{
浮动：左；
宽度：33.33%；
边框：1px纯黑；
}
}
@介质（最小宽度：768px）和（最大宽度：991px）{
.col-md-6{
浮动：左；
宽度：50%；
边框：1px纯黑；
}
.col-md-12{
浮动：左；
宽度：100%；
边框：1px纯黑；
}
}
@介质（最大宽度：767px）{
col-sm-12{
浮动：左；
宽度：100%；
边框：1px纯黑；
}
}

单元2作业
我们的菜单
ChickenOrem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变

BeefLorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变

Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变

我想我得到了你想要的。下面是一个演示：

我在你的内容周围放置了一个新的跨度，并给出了它

display: inline-block;
padding-top: 16px;

---

在@media上（最小宽度：768px）和（最大宽度：991px）

这里把这个扔到@media内部（最小宽度：768px）和（最大宽度：991px）{ 演示：

---

我采用了我上面提到的第一种方法。这里我们有固定的边距和计算的宽度，可以将您的3个部分完美地排列起来。

用我的样式替换即可…！这样就可以了，除了css之外，所有代码都可以了

.section1, .section2, .section3 {
    border: 1px solid black;
    margin: 25px;
    padding: 25px;
    position: relative;
    text-align: justify;
}

*{
框大小：边框框；
字体系列：Helvetica；
}
.行{
宽度：100%；
}
.剖面标题1、.剖面标题2、.剖面标题3{
位置：绝对位置；
宽度：60px；
高度：20px；
边框：1px纯黑；
顶部：0px；
右：0px；
文本对齐：居中；
}
.第节标题1{
背景色：红色；
}
.第节标题2{
背景色：青色；
}
.第节标题3{
背景颜色：浅蓝色；
}
.第1节、第2节、第3节{
边框：1px纯黑；
利润率：25px；
填充：25px；
位置：相对位置；
文本对齐：对齐；
}
.第1节{
背景颜色：粉红色；
}
.第2节{
背景颜色：绿色；
}
.第3节{
背景颜色：黄色；
}
h1{
利润率：20px；
文本对齐：居中；
}
@介质（最小宽度：992px）{
.col-lg-4{
浮动：左；
宽度：33.33%；
边框：1px纯黑；
}
}
@介质（最小宽度：768px）和（最大宽度：991px）{
.col-md-6{
浮动：左；
宽度：50%；
边框：1px纯黑；
}
.col-md-12{
浮动：左；
宽度：100%；
边框：1px纯黑；
}
}
@介质（最大宽度：767px）{
col-sm-12{
浮动：左；
宽度：100%；
边框：1px纯黑；
}
}

单元2作业
* {
框大小：边框框；
字体系列：Helvetica；
}
.行{
宽度：100%；
}
.剖面标题1、.剖面标题2、.剖面标题3{
位置：绝对位置；
宽度：60px；
高度：20px；
边框：1px纯黑；
顶部：0px；
右：0px；
文本对齐：居中；
}
.第节标题1{
背景色：红色；
}
.第节标题2{
背景色：青色；
}
.第节标题3{
背景颜色：浅蓝色；
}
.第1节、第2节、第3节{
边框：1px纯黑；
利润率：25px；
填充：25px；
位置：相对位置；
文本对齐：对齐；
}
.第1节{
背景颜色：粉红色；
}
.第2节{
背景颜色：绿色；
}
.第3节{
背景颜色：黄色；
}
h1{
利润率：20px；
文本对齐：居中；
}
@介质（最小宽度：992px）{
.col-lg-4{
浮动：左；
宽度：33.33%；
边框：1px纯黑；
}
}
@介质（最小宽度：768px）和（最大宽度：991px）{
.col-md-6{
浮动：左；
宽度：50%；
边框：1px纯黑；
}
.col-md-12{
浮动：左；
宽度：100%；
边框：1px纯黑；
}
}
@介质（最大宽度：767px）{
col-sm-12{
浮动：左；
宽度：100%；
边框：1px纯黑；
}
}
我们的菜单
ChickenLorem Ipsum仅仅是印刷和排版行业的虚拟文本。自16世纪以来，当一位不知名的印刷商拿起一个打印工具，争先恐后地制作一本字体样本书时，Lorem Ipsum一直是印刷和排版行业的标准虚拟文本。它不仅存活了五个世纪，而且还跨越到了电子排版，remaining基本上没有变化
BeefLorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是印刷行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本字体样本书。它不仅存活了5个世纪，而且还保存了20世纪
.section1, .section2, .section3 {
    border: 1px solid black;
    margin: 25px;
    padding: 25px;
    position: relative;
    text-align: justify;
}