使嵌套的div看起来像css中的列

嵌套的div可以通过一些CSS样式来实现类似于列的效果。可以使用flexbox布局或者网格布局来实现。

使用Flexbox布局： Flexbox布局是CSS3中引入的一种弹性布局模型，通过设置容器的flex属性和子元素的flex属性，可以实现灵活的布局效果。以下是使用Flexbox布局将嵌套的div看起来像CSS中的列的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row; /* 设置为行布局 */
    }
    
    .column {
      flex: 1; /* 让子元素平分宽度 */
      margin: 10px;
      padding: 10px;
      background-color: #eee;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</body>
</html>

以上示例中，通过设置容器为display: flex;，并且设置flex-direction为row，使得子元素水平排列。通过设置子元素的flex: 1;让子元素平分宽度，并且添加适当的间距和背景色，即可使嵌套的div看起来像CSS中的列。

使用网格布局： CSS网格布局是CSS3中引入的一种二维网格布局模型，可以将容器划分为行和列，并通过设置子元素的位置和大小实现布局。以下是使用网格布局将嵌套的div看起来像CSS中的列的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* 划分为3列 */
      grid-gap: 20px;
    }
    
    .column {
      background-color: #eee;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</body>
</html>

以上示例中，通过设置容器为display: grid;，并且设置grid-template-columns为1fr 1fr 1fr，将容器划分为3列，并且通过设置grid-gap添加间距。子元素通过设置背景色和内边距来进行装饰，即可使嵌套的div看起来像CSS中的列。

无论使用Flexbox布局还是网格布局，都可以很方便地实现使嵌套的div看起来像CSS中的列的效果。对于更复杂的布局需求，可以根据具体情况选择使用不同的布局模型。