[分享]css两首诗并排显示

在网页设计中，样式表层叠样式表（CSS）是必不可少的一部分，用于控制网页的样式和布局，让页面变得更加美观和易于阅读。作为一个前端工程师，你可能需要在网页上展示一些诗歌，那么如何利用CSS让两首诗排列并...

在网页设计中，样式表层叠样式表（CSS）是必不可少的一部分，用于控制网页的样式和布局，让页面变得更加美观和易于阅读。作为一个前端工程师，你可能需要在网页上展示一些诗歌，那么如何利用CSS让两首诗排列并列呢？下面我们就来看看。

.poem {
  width: 50%;
  float: left;
  padding: 1em;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
} 

上面的代码中，我们首先定义了.poem的样式，给它设置了一个50%的宽度和浮动到左侧的属性，这样就可以将两首诗排列在页面左右两侧。同时，我们还设置了一些padding属性，以便让诗歌内容与边框有一些缝隙，更加美观。另外，我们还需要用CSS清除浮动的影响，这里我们使用了clearfix类来实现，将它应用到我们的外层div容器上，如下所示：

<div class="clearfix">
  <div class="poem">
    ...第一首诗的代码...
  </div>
  <div class="poem">
    ...第二首诗的代码...
  </div>
</div> 

这样，我们就成功实现了两首诗在页面上并列显示的效果。如果你希望美化它们的排版，可以继续用CSS的布局属性进行调整，例如通过margin、text-align等属性来调整诗歌之间的间距和对齐方式。不过请注意，样式美化和排版优化都需要根据实际情况进行实验和调整，以适配不同的浏览器和设备。

最后，我们来欣赏一下CSS排版后的两首诗：