[分享]css两列跑到屏幕两边

当我们设计网页时，我们时常需要将内容分为左右两列，让网页看起来更加美观、易读。本文将教大家如何用CSS实现两列跑到屏幕两边的效果。html, body { margin: 0; padding: 0;...

当我们设计网页时，我们时常需要将内容分为左右两列，让网页看起来更加美观、易读。本文将教大家如何用CSS实现两列跑到屏幕两边的效果。

html, body {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
}

.content {
  flex: 1 0 0;
  padding: 20px;
}

.sidebar {
  flex: 0 0 200px;
  padding: 20px;
} 

首先，我们需要一个HTML容器。在这个容器中，我们会放置两个div元素：一个用于主要内容，一个用于侧边栏。

<div class="container">
  <div class="content">
    <p>这里是主要内容</p>
  </div>
  <div class="sidebar">
    <p>这里是侧边栏</p>
  </div>
</div> 

接下来，我们需要使用CSS的Flexbox布局来实现两列跑到屏幕两边的效果。我们首先定义一个.container类，将其设置为flex布局，并且将容器的最大宽度设置为1200像素，并居中显示。然后我们定义两个子元素，一个为.content类，一个为.sidebar类。我们使用flex-grow和flex-shrink属性来控制主要内容和侧边栏的动态变化大小，使用flex-basis属性来设置侧边栏的宽度。最后，我们给每个子元素添加一个内边距，以确保内容不会与边框重叠。

这样，我们就成功地用CSS实现了两列跑到屏幕两边的效果。希望本文能对您有所帮助！