css半栏图代码

在网页设计中，半栏图是一种很常见的布局方式。使用CSS可以很方便地实现这种布局。以下是一个使用CSS实现半栏图的代码：

/* 容器样式 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

/* 左侧栏样式 */
.left-column {
  width: 60%;
  padding-right: 20px;
  Box-sizing: border-Box;
}

/* 右侧栏样式 */
.right-column {
  width: 40%;
}

/* 媒体查询 */
@media screen and (max-width: 767px) {
  .container {
    flex-direction: column;
  }

  .left-column,.right-column {
    width: 100%;
    padding-right: 0;
  }
}

CSS代码中，首先定义了一个容器样式，使用flex布局使其内部的元素可以灵活地排列。接着定义了两个子元素，即左侧栏和右侧栏的样式，使用百分比设置宽度。为了保证左侧栏宽度与右侧栏宽度之和为100%，同时又留有一定的间距，对左侧栏设置了padding-right属性。最后使用媒体查询，在移动端设备上将布局改为纵向排列，以适应小屏幕设备。