使用Flex布局在HTML中实现双行夹批效果

时间:2024-02-22 13:49:47
<!DOCTYPE html> <html> <head> <title>Flex Words</title> <style type="text/css"> .container { display: flex; /*使用flex布局方式*/ flex-direction: row;/*子元素的排列方向*/ justify-content: left; /*容器的对齐方式 */ align-items: center;/*子元素的对齐方式,主要靠这个实现文字的垂直方向对齐*/ flex-wrap: wrap;/*实现多行Flex容器*/ } .content{ font-size:1.4em; } .comment{ font-size:0.5em; } span{ display:inline; } </style> </head> <body> <div class="container"> <span class="content">以备选择为公主、郡主入学陪侍,充为才人、赞善之职。</span> <span class="comment" style="width:20em;">【甲戌侧】一段称功颂德,千古小说中所无。</span> <span class="content">二则自薛蟠父亲死后,各省中所有的买卖承局、总管、伙计人等,见薛蟠年轻不识世事,便趁时拐骗起来,二则自薛蟠父亲死后,各省中所有的买卖承局、总管、伙计人等,见薛蟠年轻不识世事,便趁时拐骗起来,二则自薛蟠父亲死后,各省中所有的买卖承局、总管、伙计人等,见薛蟠年轻不识世事,便趁时拐骗起来,</span> <span class="comment" style="width:12em;">【蒙侧】我为创家立业者一哭。</span> </div> <div class="container"> <p class="content">这是另一段正文</p> <p class="comment" style="width:8em;">这是一个双行显示的注释</p> <p class="content">这是另一段正文中的文字</p> <p class="comment" style="width:6em;">双行合一实现示例</p> </div> </body> </html>