<!DOCTYPE html> <html> <head> <title>两个内容并排</title> <style> .container { display: flex; } .content1, .content2 { flex: 1; padding: 10px; } </style> </head> <body> <div class="container"> <div class="content1"> <h1>标题</h1> <p>在当今的科技时代,我们的生活被各种信息和娱乐内容包围,这些内容不仅丰富了我们的生活,也为我们提供了无尽的学习和发展的机会,随着信息的爆炸性增长,我们如何有效地管理和利用这些信息成为了一个亟待解决的问题,在这个问题上,我们需要创新的思考和策略,以适应这个快速变化的世界。</p> <!-- 在这里添加更多的内容 --> </div> <div class="content2"> <!-- 在这里添加第二个内容 --> </div> </div> </body> </html>
在这个示例中,我们首先创建了一个名为.container
的<div>
,并将其display
属性设置为flex
,这将使其子元素(即.content1
和.content2
)并排显示,我们将.content1
和.content2
的flex
属性都设置为1,这意味着它们将平均分配可用的空间,我们还为这两个<div>
添加了一些内边距,以便在它们之间留出一些空间。
在.content1
中,我们添加了一个标题和一个段落,你可以根据需要添加更多的内容,在.content2
中,你可以添加你想要的任何内容。
还没有评论,来说两句吧...